使用JS动态创建含有1000行的表格

function addTable(){

        createTable1(1000);

        //createTable2(1000);

        //createTable3(1000);

        //createTable4(1000);

        //createTable5(1000);

    }

    function createTable1(rows){

        var div = document.getElementById("div1Id");

        var child = div.childNodes;

        for(var i = 0,len = child.length;i < len;i ++){

            div.removeChild(child[i]);

        }

        var start = new Date().getTime();

        var str = "<table>";

        str += "<tr>";

        for(var i = 0;i < 5;i ++){

            str += "<th>列" + i + "</th>";

        }

        str += "</tr>";

        for(var  i = 0;i < rows;i ++){

            str += "<tr>"

            for(var j = 0;j < 5;j ++){

                str += "<td>" + j + "</td>";

            }

            str += "</tr>";

        }

        str += "</table>";

        //div.innerHTML = str;

        //$(div).append(str);

        $(div).html(str);

        var end = new Date().getTime();

        console.log("createTable1: " + (end - start));

    }

    function createTable2(rows){

        var div = document.getElementById("div2Id");

        var child = div.childNodes;

        for(var i = 0,len = child.length;i < len;i ++){

            div.removeChild(child[i]);

        }

        var start = new Date().getTime();

        var str = "<table>";

        str = str + "<tr>";

        for(var i = 0;i < 5;i ++){

            str = str + "<th>列" + i + "</th>";

        }

        str =str + "</tr>";

        for(var  i = 0;i < rows;i ++){

            str = str + "<tr>"

            for(var j = 0;j < 5;j ++){

                str = str + "<td>" + j + "</td>";

            }

            str = str + "</tr>";

        }

        str = str + "</table>";

        //div.innerHTML = str;

        $(div).append(str);

        var end = new Date().getTime();

        alert("createTable2: " + (end - start));

    }

    function createTable3(rows){

        var div = document.getElementById("div3Id");

        var child = div.childNodes;

        for(var i = 0,len = child.length;i < len;i ++){

            div.removeChild(child[i]);

        }

        var start = new Date().getTime();

        var str = [];

        str.push("<table>" , "<tr>");

        for(var i = 0;i < 5;i ++){

            str.push("<th>列" + i + "</th>");

        }

        str.push("</tr>");

        for(var  i = 0;i < rows;i ++){

            str.push("<tr>");

            for(var j = 0;j < 5;j ++){

                str.push("<td>" + j + "</td>");

            }

            str.push("</tr>");

        }

        str.push("</table>");

        div.innerHTML = str.join("");

        var end = new Date().getTime();

        alert("createTable3: " + (end - start));

    }

    function createTable4(rows){

        var div = document.getElementById("div4Id");

        var child = div.childNodes;

        for(var i = 0,len = child.length;i < len;i ++){

            div.removeChild(child[i]);

        }

        var start = new Date().getTime();

        var _table = document.createElement('table');

        var _row = document.createElement('tr');

        _table.appendChild(_row);

        for(var i = 0;i < 5;i ++){

            var _cell = document.createElement('td');

            _cell.innerHTML = 'col' + i;

            _row.appendChild(_cell);

        }

        for(var i = 0;i < rows;i ++){

            var _row = document.createElement('tr');

            _table.appendChild(_row);

            for(var j = 0;j < 5;j ++){

                var _cell = document.createElement('td');

                _cell.innerHTML = i + '/' + j;

                _row.appendChild(_cell);

            }

        }

        div.appendChild(_table);

        var end = new Date().getTime();

        alert("createTable4: " + (end - start));

    }

    function createTable5(rows){

        var div = document.getElementById("div4Id");

        var child = div.childNodes;

        for(var i = 0,len = child.length;i < len;i ++){

            div.removeChild(child[i]);

        }

        var start = new Date().getTime();

        var _table = document.createElement('table');

        var _row = document.createElement('tr');

        var _tableFrag = document.createDocumentFragment();

        var _rowFrag = document.createDocumentFragment();

        _tableFrag.appendChild(_row);

        for(var i = 0;i < 5;i ++){

            var _cell = document.createElement('td');

            _cell.innerHTML = 'col' + i;

            _rowFrag.appendChild(_cell);

        }

        _row.appendChild(_rowFrag);

        for(var i = 0;i < rows;i ++){

            var _row = document.createElement('tr');

            _tableFrag.appendChild(_row);

            var _rowFrag = document.createDocumentFragment();

            for(var j = 0;j < 5;j ++){

                var _cell = document.createElement('td');

                _cell.innerHTML = i + '/' + j;

                _rowFrag.appendChild(_cell);

            }

            _row.appendChild(_rowFrag);

        }

        _table.appendChild(_tableFrag);

        div.appendChild(_table);

        var end = new Date().getTime();

        alert("createTable5: " + (end - start));

    }