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)); }