document.fragments vs appendChild

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<ul id="target"></ul>
<script>
Benchmark.prototype.setup = function() {
    var data = [
        {
            "uuid": "19dhxagktxzov1u1f8f09lz53w",
            "headline": "test m1",
            "teaser": "test",
            "images": []
        },
        {
            "uuid": "1yh9qkwi1ndg15rtpcn9wnylw",
            "headline": "Test Article",
            "teaser": "Test Article",
            "images": [
                {
                    "uuid": "un2hutjghvul1ezcj3m7q2sot",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/4e/24/test_1jjbms156nf8w1cw2bugtb4a3g.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "Getty"
                }
            ]
        },
        {
            "uuid": "aj31joq1mrh11hln5hxv4p22k",
            "headline": "Chris's Article",
            "teaser": "Chris's Article",
            "images": [
                {
                    "uuid": "rel2sim754031cyj0ya11hsk4",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/c5/44/test_j7tmqacqesi51s3hxg5vmlxpy.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "Action Images"
                }
            ]
        },
        {
            "uuid": "179oz0ytj6idt1engxi6py273e",
            "headline": "Rohan's Article",
            "teaser": "Rohan's Article",
            "images": [
                {
                    "uuid": "mgapxi0lng3i1ww7cfbzia5y1",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/5a/f4/test_1ob0xqa8curnl1bebb4nf4ote6.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "Action Images"
                },
                {
                    "uuid": "mgapxi0lng3i1ww7cfbzia5y1",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/5a/f4/test_1ob0xqa8curnl1bebb4nf4ote6.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "Action Images"
                }
            ]
        },
        {
            "uuid": "10m83a3i6f38k1v0gua1ctays8",
            "headline": "Adam Test",
            "teaser": "Adam Test",
            "images": [
                {
                    "uuid": "1qub89mq4mvl1ln3dkr5dhigq",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/85/7e/test_839mmfkjpfus148upbdbnwsel.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "6qzi11jmiuyi109t72jnp56ft",
            "headline": "ImagePickerTest",
            "teaser": null,
            "images": [
                {
                    "uuid": "14y5685ubjwq1edj1w4gpvfw2",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/fc/43/pic8-2013-1945_4nthog4ib0241nlm4rx6trx4j.jpg",
                    "altText": "Pic_8 2013 19:45",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "36bar12lb8mj11ridan2a187a",
            "headline": "VideoPickerTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "5rrqi2actqkc173wfrwsf6hx6",
            "headline": "Australia win series in Sri Lanka_Edited",
            "teaser": "Australia have retained the Warne-Muralitharan trophy after the third Test against Sri Lanka in Colombo meandered to a draw on Tuesday.",
            "images": []
        },
        {
            "uuid": "1skajvqver0531tsiphi6p8ixk",
            "headline": "Fiji ready for Samoa battle_Edited",
            "teaser": "Fiji captain Deacon Manu feels his side's battle with Samoa on Sunday is a must-win match.",
            "images": []
        },
        {
            "uuid": "kv4nye2jmn97129ogviexfpnx",
            "headline": "Tottenham can challenge for title, says King",
            "teaser": "Former Tottenham centre-back Ledley King believes the north London club will soon challenge for the English Premier League title.",
            "images": []
        },
        {
            "uuid": "7v7dwlh8sr1y1aszq3soq0zcb",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "inzyxj2kuwu91abg59ovek0nh",
            "headline": "PalLucene Mar21",
            "teaser": "zsdfgdrfsg",
            "images": [
                {
                    "uuid": "4rhqd1df4hoc10wf0muvmwh30",
                    "type": "IMAGE_BODY",
                    "url": "/di/library/guatemala/e8/4c/ja-a-pinta_1peqeswzrqiv21bbwviidrjos6.jpg",
                    "altText": "ja a pinta",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "1mvtny461ojgl1cx0enznwfz73",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/2d/4e/332_76pybt699bod1sxil0z5zauij.jpg",
                    "altText": "332",
                    "caption": "342",
                    "credit": "fhfghfg"
                },
                {
                    "uuid": "1v5f81msjwk8y1hkp19mqmi1nb",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/2e/60/344_l2dzobohe0vf16mgasqtagjc9.jpg",
                    "altText": "344",
                    "caption": "hgf",
                    "credit": "fhfghfg"
                }
            ]
        },
        {
            "uuid": "4n4dhil2t0oo12msuln1hogi3",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "dktjnihz6b971tk38pb41cvcc",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "168l8w57jl0en15b0lijdy4fl2",
            "headline": "vcsdde",
            "teaser": null,
            "images": [
                {
                    "uuid": "6lb3968cxogw1pgqs920thnej",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/53/e5/perform_v2hqt0b71efe1238b5octb0nw.gif",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "dsfas"
                },
                {
                    "uuid": "1dai1bzl10bwez90jfjtf59un",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/56/f5/test1_14b7y8j4tjb6h1g6uw0lf2mad2.jpg",
                    "altText": "test1",
                    "caption": "na",
                    "credit": "bob"
                }
            ]
        },
        {
            "uuid": "1rezo5g2h0pos1mtsvbpf1stdf",
            "headline": "Lucene_Mon Mar 11 2013 19:34",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1nzvefuvf9kdx1o1upm9ebviiq",
            "headline": "Verify_Delete",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "euc1kpn8u26z1czsf1jtrkqxu",
            "headline": "TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1h7mgzd26l7ux1jaowojuq7et0",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1n15dvyveo4zyz764pe0j9agy",
            "headline": "Pal_OmniSprortUpdated",
            "teaser": null,
            "images": [
                {
                    "uuid": "hn9cafcqi0q71rcmwsxpbjzg6",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/a9/65/bug-test_byj7t2w7s4pi1qvx9vzwbctml.jpg",
                    "altText": "Bug test",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "hn9cafcqi0q71rcmwsxpbjzg6",
                    "type": "IMAGE_SOURCE",
                    "url": "/di/library/guatemala/a9/65/bug-test_byj7t2w7s4pi1qvx9vzwbctml.jpg",
                    "altText": "Bug test",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "p71lk5k5rbo614d9r8n79gb7f",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/6/21/palregtest2_ImagesZip/1jwvf31r3a6ud14cdzuaviz3i9.jpg",
                    "altText": "PalRegTest2",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "p71lk5k5rbo614d9r8n79gb7f",
                    "type": "IMAGE_MPU",
                    "url": "/di/library/guatemala/6/21/palregtest2_ImagesZip/1jwvf31r3a6ud14cdzuaviz3i9.jpg",
                    "altText": "PalRegTest2",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "p71lk5k5rbo614d9r8n79gb7f",
                    "type": "IMAGE_MOBILE",
                    "url": "/di/library/guatemala/6/21/palregtest2_ImagesZip/1jwvf31r3a6ud14cdzuaviz3i9.jpg",
                    "altText": "PalRegTest2",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "p71lk5k5rbo614d9r8n79gb7f",
                    "type": "IMAGE_SOURCE",
                    "url": "/di/library/guatemala/6/21/palregtest2_ImagesZip/1jwvf31r3a6ud14cdzuaviz3i9.jpg",
                    "altText": "PalRegTest2",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "tn7mm5cqu4241jdwn75ankgk3",
            "headline": "gfdsda",
            "teaser": null,
            "images": [
                {
                    "uuid": "hn9cafcqi0q71rcmwsxpbjzg6",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/a9/65/bug-test_byj7t2w7s4pi1qvx9vzwbctml.jpg",
                    "altText": "Bug test",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "1a981n9slqgez1np6bt1gogle4",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/a2/b8/palregtest4_ImagesZip/NewF/7ba18cjeuvpx18k6wmlr0quzv.jpg",
                    "altText": "PalRegTest4",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "prsktu1g6vlx1t9w0isauft1i",
            "headline": "test 2",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1n0bosdzfzyue1py5k8xrcnnif",
            "headline": "Pal_Lucene",
            "teaser": "easer Text",
            "images": [
                {
                    "uuid": "hn9cafcqi0q71rcmwsxpbjzg6",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/a9/65/bug-test_byj7t2w7s4pi1qvx9vzwbctml.jpg",
                    "altText": "Bug test",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "1a981n9slqgez1np6bt1gogle4",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/a2/b8/palregtest4_ImagesZip/NewF/7ba18cjeuvpx18k6wmlr0quzv.jpg",
                    "altText": "PalRegTest4",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "1a981n9slqgez1np6bt1gogle4",
                    "type": "IMAGE_GALLERY",
                    "url": "/di/library/guatemala/a2/b8/palregtest4_ImagesZip/NewF/7ba18cjeuvpx18k6wmlr0quzv.jpg",
                    "altText": "PalRegTest4",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "1a981n9slqgez1np6bt1gogle4",
                    "type": "IMAGE_MPU",
                    "url": "/di/library/guatemala/a2/b8/palregtest4_ImagesZip/NewF/7ba18cjeuvpx18k6wmlr0quzv.jpg",
                    "altText": "PalRegTest4",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "qkbljmswn6e11vp6gbi7w0dui",
            "headline": "Verify_Delete",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "xsjhwkx4umlw1luiqjow29gc6",
            "headline": "TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "e31lr29getel1q8i3c5udvvkp",
            "headline": "TeamPickerTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1a3e8nub2mzjw116utp2l0rubb",
            "headline": "pal",
            "teaser": "fd",
            "images": []
        },
        {
            "uuid": "kiqrvtx8ygu21r28qaodk7i7w",
            "headline": "Lucene_Wed Mar 06 2013 17:30",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "kd3skm8i7o981xphxpsvr6nqn",
            "headline": "Lucene_Wed Mar 06 2013 17:19",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "10v3ayef3enle1n9ckshdftqrd",
            "headline": "Lucene_Wed Mar 06 2013 17:10",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "15utonqdrhohu11tycc6ehkrhj",
            "headline": "Lucene_Wed Mar 06 2013 17:03:37",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "5pt3z8lpvcnz1i5510tbxvtuf",
            "headline": "Lucene_Wed Mar 06 2013 16:51:46",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "f4k1653jxsh81gfa1eezy831i",
            "headline": "Lucene_Wed Mar 06 2013 16:31:00",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "6pyj645yck37zitwc6c9skf9",
            "headline": "Lucene_Wed Mar 06 2013 16:28:54",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "xj5pju1j4w4o1vw1qvzsbr5z6",
            "headline": "Pal_Lucene test",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1roqaoxbo74ar1oejrace4ucs6",
            "headline": "TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1mdvaudfwmrzt18vjylx24tcbo",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "lsppqtus7td912b4ze1pq2aen",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "16siy6yilz0ni14ytm1dx82mki",
            "headline": "tyutyu",
            "teaser": null,
            "images": [
                {
                    "uuid": "boy5h3mwvs7r1thopd3g9fzqf",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/cf/5e/perform_7vlz7r66ilk81bbenldqzh1n9.gif",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "1aj2a55z6ygfb1x8jvxxvjvmz9",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/4f/a8/batimageupload_wdqdvzpgsiak1kb5sxyhcaq1s.jpg",
                    "altText": "BAT_Caption",
                    "caption": "Caption",
                    "credit": "Creditdv"
                }
            ]
        },
        {
            "uuid": "mya4i78n84ac1uci57lrohlfn",
            "headline": "Reja sticking with Lazio",
            "teaser": "Edy Reja has confirmed he will continue in charge of Lazio after club president Claudio Lotito rejected the coach's resignation.",
            "images": [
                {
                    "uuid": "8g3obvwjqvk51mkj5rwrzfj3n",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/a4/9d/batimageupload_sx5kducw3x2x1nvcp17zxwkmi.jpg",
                    "altText": "BAT_Caption",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "8g3obvwjqvk51mkj5rwrzfj3n",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/a4/9d/batimageupload_sx5kducw3x2x1nvcp17zxwkmi.jpg",
                    "altText": "BAT_Caption",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "8g3obvwjqvk51mkj5rwrzfj3n",
                    "type": "IMAGE_GALLERY",
                    "url": "/di/library/guatemala/a4/9d/batimageupload_sx5kducw3x2x1nvcp17zxwkmi.jpg",
                    "altText": "BAT_Caption",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "1wstn6k9j6suo1cvxprv24ubkv",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1dvt2ju8b1gma1ojfcy30lrr6x",
            "headline": "PalKeyword test",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1434r2z8ifmql1qjkv695ihzgl",
            "headline": "fdsfs",
            "teaser": "Teaser",
            "images": [
                {
                    "uuid": "a6h05e02xlj21kb2v28slc9x5",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/ea/67/perform_11hzdo61u9mkvz2hlwk6f9hzy.gif",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "branag0tolph182x3t6gfb9fv",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/d7/f/pal_1qllaktzmaqu81j1b6c25r3om4.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "1dpinu3ox19501nwhaj3kbw6x0",
            "headline": "pal_adhoc tested",
            "teaser": "dfg",
            "images": [
                {
                    "uuid": "f2h9n6logbd710k6iysspoi8a",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/fa/45/batimageupload_wh0w2g3gfqu0186e6ekaxe87i.jpg",
                    "altText": "BAT_Caption",
                    "caption": "Captiongb",
                    "credit": "Credit"
                },
                {
                    "uuid": "branag0tolph182x3t6gfb9fv",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/d7/f/pal_1qllaktzmaqu81j1b6c25r3om4.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                },
                {
                    "uuid": "branag0tolph182x3t6gfb9fv",
                    "type": "IMAGE_GALLERY",
                    "url": "/di/library/guatemala/d7/f/pal_1qllaktzmaqu81j1b6c25r3om4.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "16eu6yiitrxaa1lvivsl7hclej",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "12d3gquhu5s7j17ntcz20gwnu3",
            "headline": "BAT_CreateArt_test",
            "teaser": null,
            "images": [
                {
                    "uuid": "f2h9n6logbd710k6iysspoi8a",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/fa/45/batimageupload_wh0w2g3gfqu0186e6ekaxe87i.jpg",
                    "altText": "BAT_Caption",
                    "caption": "Captiongb",
                    "credit": "Credit"
                },
                {
                    "uuid": "a6h05e02xlj21kb2v28slc9x5",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/ea/67/perform_11hzdo61u9mkvz2hlwk6f9hzy.gif",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "m8mcsznjyb0h1me036o7twc1d",
            "headline": "BAT_CreateArt_test",
            "teaser": null,
            "images": [
                {
                    "uuid": "a6h05e02xlj21kb2v28slc9x5",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/ea/67/perform_11hzdo61u9mkvz2hlwk6f9hzy.gif",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "branag0tolph182x3t6gfb9fv",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/d7/f/pal_1qllaktzmaqu81j1b6c25r3om4.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "1w2voklx5assi1n7g351grsqlc",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "1t1anx33qu9ci1leovdgjfvyjx",
            "headline": "Pal_BAT Feb13",
            "teaser": "Teaser",
            "images": [
                {
                    "uuid": "ryaq1nbqnc9a1t14cb4ugm8p7",
                    "type": "IMAGE_HEADER",
                    "url": "/di/library/guatemala/8a/3e/testpng_1x426xz8dqorc1ggzddb89wwjw.png",
                    "altText": "testPNG",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "1tstnlgs2in4p1sm8z0ushn9yq",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/3c/3d/martintest_dc8mk0s062wt1di3jr0xki0m6.jpg",
                    "altText": "Martin_test",
                    "caption": "captions",
                    "credit": "na"
                },
                {
                    "uuid": "1tstnlgs2in4p1sm8z0ushn9yq",
                    "type": "IMAGE_GALLERY",
                    "url": "/di/library/guatemala/3c/3d/martintest_dc8mk0s062wt1di3jr0xki0m6.jpg",
                    "altText": "Martin_test",
                    "caption": "captions",
                    "credit": "na"
                },
                {
                    "uuid": "12isyltibccbj1ounw5tvzoc9v",
                    "type": "IMAGE_BODY",
                    "url": "/di/library/guatemala/4c/3d/pal_1qllaktzmaqu81j1b6c25r3om4.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "uix3muf6izce1ghnzawvp1702",
            "headline": "Pal_Fixture",
            "teaser": null,
            "images": [
                {
                    "uuid": "1tstnlgs2in4p1sm8z0ushn9yq",
                    "type": "IMAGE_TEASER",
                    "url": "/di/library/guatemala/3c/3d/martintest_dc8mk0s062wt1di3jr0xki0m6.jpg",
                    "altText": "Martin_test",
                    "caption": "captions",
                    "credit": "na"
                }
            ]
        }
    ];
   
};

Benchmark.prototype.teardown = function() {
    document.getElementById('target').innerHTML = '';
};
</script>

Preparation code output

    Test runner

    Warning! For accurate results, please disable Firebug before running the tests. (Why?)

    Java applet disabled.

    Testing in unknown unknown
    Test Ops/sec
    document fragment
    var fragment = document.createDocumentFragment(); 
    for(var i=0;i<data.length;i++){        
            var li = document.createElement('li'),
                    div = document.createElement('div'),
                    p = document.createElement('p'),
                    h1 = document.createElement('h1'),
                    link = imgLink  = document.createElement('a'),      
                    img     = document.createElement('img');
                   
            var article = data[i];
                   
            div.className = 'overlay';
                    link.href = imgLink.href = "news/article/"+article.uuid;
                    img.alt = "";
                    var src = "/di/library/bein/25/0/olympique-lyonnais-as-saint-etienne_m6bz6tpyetyh1v50s2r283jzx.jpg?t=904551678&amp;w=990&amp;quality=100&amp;cropTo=top";              
            if(article.images.length > 0){
                            var image = article.images[0];
                            src = image.url;
                            src += src.indexOf('?') === -1 ? "?w=990&quality=95&cropTo=top" : "&w=990&quality=95&cropTo=top";
                            img.alt = image.altText;
                    }
                    img.src = src;
           
            // update text
            p.appendChild(document.createTextNode(article.teaser));
            link.appendChild(document.createTextNode(article.headline));
         
            // insert all elements into place
            h1.appendChild(link);
            div.appendChild(h1);
            div.appendChild(p);
            imgLink.appendChild(img);
         
            // insert the elements in the li
            li.appendChild(div);
            li.appendChild(imgLink);
                   
                    fragment.appendChild(li);
    }
    document.getElementById('target').appendChild(fragment);
    pending…
    jQuery && apendChild
    $(data).each(function(){
         
            // create the newsreader elements
            var li      = document.createElement('li');
            var div     = document.createElement('div');
            var p       = document.createElement('p');
            var h1      = document.createElement('h1');
            var link    = document.createElement('a');
            var imgLink = document.createElement('a');
            var img     = document.createElement('img');
         
            // update attributes
            $(div).attr('class','overlay');
                         
            // update the hrefs
            var linkUrl = this.uuid;
            link.href = 'news/article/' + linkUrl;
            imgLink.href = 'news/article/' + linkUrl;
         
            // add images
            img.src = "/di/library/bein/25/0/olympique-lyonnais-as-saint-etienne_m6bz6tpyetyh1v50s2r283jzx.jpg?t=904551678&amp;w=990&amp;quality=100&amp;cropTo=top";
            img.alt = "";
            if(this.images.length > 0) {        
              img.alt = this.images[0].altText;          
              img.src = this.images[0].url + "&w=990&quality=100&cropTo=top";
            }
               
            // update text
            $(p).text(this.teaser);
            $(link).text(this.headline);
         
            // insert all elements into place
            h1.appendChild(link);
            div.appendChild(h1);
            div.appendChild(p);
            imgLink.appendChild(img);
         
            // insert the elements in the li
            li.appendChild(div);
            li.appendChild(imgLink);  
         
            // add them to carousel
            $('#target').append(li);  
          });
    pending…
    innerHTML
     var fragmentMarkup = "";
         
          for(var i=0;i<data.length;i++){
            var article = data[i],
                href = "news/article/"+article.uuid,
                            src = "/di/library/bein/25/0/olympique-lyonnais-as-saint-etienne_m6bz6tpyetyh1v50s2r283jzx.jpg?t=904551678&amp;w=990&amp;quality=100&amp;cropTo=top",
                            alt = "";
                           
                    if(article.images.length > 0){
                            var image = article.images[0];
                            src = image.url;
                            src += src.indexOf('?') === -1 ? "?w=990&quality=95&cropTo=top" : "&w=990&quality=95&cropTo=top";
                            alt = image.altText;
                    }              
            fragmentMarkup += '<li><div class="overlay"><h1><a href="'+href+'">'+article.headline+'</a></h1><p>'+article.teaser+'</p></div>';
            fragmentMarkup += '<a href="'+href+'"><img src="'+src+'" alt="'+alt+'"></a></li>';
          }
    document.getElementById('target').innerHTML = fragmentMarkup;
    pending…

    Compare results of other browsers

    Revisions

    You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

    0 comments

    Add a comment