详细解析 JS 中创建 DOM 的 3 种常用方式及最佳方法。
我将提供 3 种创建大型 DOM 的方法及其优缺点，当然还有最优化的大型 DOM 创建方法以及原因。
底线是在 js 中创建 DOM 时，原生 JS 和 DOM 方法是你的朋友，除非没有其他方法（这不太可能），否则不要使用 Jquery。
比较测试数据：创建了 400 行 5 列并附加到 DOM。
testData 是您从后端以 json 形式获取的用于创建表的对象列表。
附上不同浏览器的执行时间测试结果快照HTML
<div id="employeeListContainer1"></div>
<table id="employeeList2">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Title</th>
<th>ID</th>
<th>Department</th>
</tr>
</thead>
</table>
第一种方式：字符串连接（就跨浏览器的性能而言，最优化的方式）
var tableElementContainer1 = document.getElementById("employeeListContainer1");
var temptableHolder = '<table><thead><tr><th>First Name</th><th>Last Name</th><th>Title</th><th>ID</th><th>Department</th></tr></thead><tbody>';
for(var i=0,len=testData.length; i<len; i++){
temptableHolder += '<tr><td>' + testData[i].firstName + '</td><td>' + testData[i].lastName + '</td><td>' + testData[i].title
+ '</td><td>' + testData[i].id + '</td><td>' + testData[i].department + '</td></tr>';
}
temptableHolder += '</tbody></table>';
tableElementContainer1.innerHTML = temptableHolder ;
优点：
- Firefox/Chrome/IE/Safari 上最快的执行时间（浏览器之间为 3 到 5 毫秒）。通过 performance.now() 和 console.time() API 测量。
缺点：
- 当列数更多并且您需要设置大量属性时，使用字符串可能会变得不那么困难，并且不太容易成立。
第二种方法：Native Js document.createElement()（就跨浏览器的性能而言，这是第二种最佳方法）
var tableBody = document.createElement('tbody');
var tableElement2 = document.getElementById("employeeList2");
for(var i=0,len=testData.length; i<len; i++){
tableRow = document.createElement("tr");
for(var k in testData[i]){
rowCell = document.createElement("td");
rowCell.appendChild(document.createTextNode(testData[i][k]));
tableRow.appendChild(rowCell);
}
tableBody.appendChild(tableRow);
}
tableElement2.appendChild(tableBody);
优点：
- 在 Firefox/Chrome/Safari 中第二快的执行时间（跨浏览器为 5 到 12 毫秒）。通过 performance.now() 和 console.time() API 测量。
- 比第一种方法更站得住脚
缺点：
第三种方式：使用 Jquery 创建 DOM（我的建议是不要使用它）
var tableBody = $('<tbody></tbody>');
var tableElement2 = document.getElementById("employeeList2");
for(var i=0,len=testData.length; i<len; i++){
tableRow = $("<tr></tr>");
for(var k in testData[i]){
rowCell = $("<td></td>");
rowCell.append(testData[i][k]);
tableRow.append(rowCell);
}
tableBody.append(tableRow);
}
tableElement2.append(tableBody);
优点：
- 易于在元素上添加属性/类/样式，易于阅读且易于维护。
缺点：
- 所有浏览器的执行时间最差（220 毫秒到 330 毫秒），最慢的数字在 IE 中