javascript - element.innerHTML和appendChild有什么区别

Question

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

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

Answer 1

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

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

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

Answer 2

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

简单的说就是以前确实是用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 插入标记

Answer 3

appendChild是每次插入的内容都成为该元素的最后一个子元素。（插入）

innerHTML是整个重写该元素内的所有HTML代码，也就是说之前写的那些都会被覆盖。（覆盖）

从性能上说，innerHTML效率要高一些，因为直接解析字符串比创建html节点对象再生成html节点要快。

但是innerHTML还有两个缺点：

1. 如果你在原来的子元素上绑定了事件的话，重写后事件绑定仍然还在

2. js代码和html代码耦合程度高，不利于维护

不过如果仅仅要实现一个简单的需求的话，用innerHTML性能还是好些。如果需要大规模重写html的话，可以使用模板引擎来完成。

Answer 4

推荐比较科学的一次性插入较多Dom的方法，使用document fragment。

http://www.w3schools.com/jsref/met_document_createdocumentfragment.asp

首先创建一个document fragment(文档碎片),在里面动态插入Dom元素，最后一次性把这个document fragment插入到Dom树里面。

Answer 5

element.innerHTML和appendChild在每个浏览器表现不一样额，动态创建table，只能用appendChild，在ie有些浏览器不兼容，谷歌表现element.innerHTML更快，火狐appendChild更快