element.innerHTML和appendChild有什么区别

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

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

阅读 9.5k
5 个回答

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

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

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

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

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

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

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

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

但是innerHTML还有两个缺点:

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

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

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

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

1 篇内容引用
推荐问题
宣传栏