如果我现在想往页面里加入一个表格我可能会这样写.
//创建 table
var table = document.createElement("table"); table.border = 1;
table.width = "100%";
//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell1_1 = document.createElement("td"); cell1_1.appendChild(document.createTextNode("Cell 1,1")); row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td"); cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);
//创建第二行
var row2 = document.createElement("tr"); tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2= document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);
//将表格添加到文档主体中
document.body.appendChild(table);
但如果我用innerHTML仅仅只需要拼接字符串即可?到底用哪种方式好?
请从多角度说明,比如说从性能角度去考虑。
非常不喜欢使用innerHTML,因为使用javascript拼接html和使用java拼接javascript一样丑陋。
当只插入一次时,createElement能够产生半成品(能添加事件等其他的操作),给浏览器时浏览器需要做的额外的事情比解html析字符串少。
如果需要大量的插入时,用
createElement
再appendChild
肯定比innerHTML
差,但是createDocumentFragment
再appendChild
会更好。另外,这里的文章
还有测试结果
都表明了最好不要用innerHTML。