var content = document.getElementById("content"),

    start;

​

​

​

document.getElementById("start").onclick = function () {

​

    var howMany = document.getElementById("how-many").value;

    var i;

​

    // reset

    content.innerHTML = "";

​

    // TEST 01

    // start = Date.now();

    // for (var i = 0; i < howMany; i += 1) {

    //  content.innerHTML += '<div id="div-'+ i +'">div ' + i + '</div>';

    // }

    // console.log("content.innerHTML += time: " + (Date.now() - start));

​

    // // reset

    // content.innerHTML = "";

​

​

    // TEST 02

    start = Date.now();

    var newContent = "";

    for (i = 0; i < howMany; i += 1) {

        newContent += '<div id="div-'+ i +'" >div ' + i + '</div>';

    }

    content.innerHTML = newContent;

    console.log("newContent += -> time: " + (Date.now() - start));

​

​

    // reset

    content.innerHTML = "";

​

    // TEST 03

    start = Date.now();

​

    for (i = 0; i < howMany; i += 1) {

        var newEl = document.createElement("div");

        newEl.id = "div-" + i;

        newEl.innerHTML = "div: " + i;

        newEl.name = "pippo";

        content.appendChild(newEl);

    }

    console.log("createElement -> time: " + (Date.now() - start));

​

    console.log("- - - - divs has been created - - - -");

​

    // TEST 04 - getElementById

    start = Date.now();

    for (i = 0; i < howMany; i += 1) {

        document.getElementById("div-" + i);

    }

    console.log("getElementById -> time: " + (Date.now() - start));

​

​

    // TEST 05 - $ simple id

    start = Date.now();

    for (i = 0; i < howMany; i += 1) {

        $("#div-" + i);

    }

    console.log("$ id only -> time: " + (Date.now() - start));

​

    // TEST 06 - querySelector simple id

    start = Date.now();

    for (i = 0; i < howMany; i += 1) {

        document.querySelector("#div-" + i);

    }

    console.log("querySelector id only -> time: " + (Date.now() - start));

​

    // TEST 07 - $ tag + id

    start = Date.now();

    for (i = 0; i < howMany; i += 1) {

        $("div#div-" + i);

    }

    console.log("$ tag + id -> time: " + (Date.now() - start));

​

    // TEST 08 - querySelector tag + id

    start = Date.now();

    for (i = 0; i < howMany; i += 1) {

        document.querySelector("div#div-" + i);

    }

    console.log("querySelector tag + id -> time: " + (Date.now() - start));

​

    console.log("- - - - - - - - - - - - - - - - - - - ");

};

​

​

document.onkeydown = function (event) {

    if (event.keyCode === 13) {

        document.getElementById("start").click();

    }

};

​

​

​

​

​

​

​

​

​

​