element.innerHTML和appendChild有什么区别

72642027

发布于
2016-03-26

如果我现在想往页面里加入一个表格我可能会这样写.

//创建 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仅仅只需要拼接字符串即可？到底用哪种方式好？
请从多角度说明，比如说从性能角度去考虑。

html javascript

阅读 9.5k

5 个回答

外籍杰克

✓ 已被采纳

非常不喜欢使用innerHTML，因为使用javascript拼接html和使用java拼接javascript一样丑陋。

当只插入一次时，createElement能够产生半成品（能添加事件等其他的操作），给浏览器时浏览器需要做的额外的事情比解html析字符串少。
如果需要大量的插入时，用createElement再appendChild肯定比innerHTML差，但是createDocumentFragment再appendChild会更好。

另外，这里的文章
还有测试结果
都表明了最好不要用innerHTML。

Vagor

72642027

发布于
2016-03-26

我自己查到了合适的答案。

简单的说就是以前确实是用appendChild这么慢的方式一步步插入；
HTML出来的新的标准，提供了插入标记的方法innerHTML。

虽然 DOM 为操作节点提供了细致入微的控制手段,但在需要给文档插入大量新 HTML 标记的情况下,通过 DOM 操作仍然非常麻烦,因为不仅要创建一系列 DOM 节点,而且还要小心地按照正确的顺序把它们连接起来。相对而言,使用插入标记的技术,直接插入 HTML 字符串不仅更简单,速度也更快。以下与插入标记相关的 DOM 扩展已经纳入了 HTML5 规范。

使用 innerHTML 属性也有一些限制。比如,在大多数浏览器中,通过 innerHTML 插入<script> 元素并不会执行其中的脚本。IE8 及更早版本是唯一能在这种情况下执行脚本的浏览器,但必须满足一些条件。一是必须为<script>元素指定 defer 属性,二是<script>元素必须位于(微软所谓的)“有作用域的元素”(scoped element)之后。<script>元素被认为是“无作用域的元素”(NoScope element), 也就是在页面中看不到的元素,与<style>元素或注释类似。如果通过 innerHTML 插入的字符串开头就是一个“无作用域的元素”,那么 IE 会在解析这个字符串前先删除该元素。

以上引自《Javascript高级程序设计》——11.3.6 插入标记