insertRow 与 appendChild答案

【问题标题】：insertRow vs. appendChildinsertRow 与 appendChild
【发布时间】：2010-10-27 03:29:39
【问题描述】：

向表中添加行首选哪种方法？

var tr = tbl.insertRow(-1);

或

var tr = document.createElement('tr'); tbl.appendChild(tr);

【问题讨论】：

【解决方案1】：

我看到了 insertRow 的好论据，但我发现了一个缺点：insertRow 只能创建一个新的空行，而 appendChild 采用现有的行对象。使用 appendChild，您可以在表中移动行，将行从一个表移动到另一个表，或者从表中取出一行，然后再将其放回（对于分页表非常方便）。要对 insertRow（和 insertCell）执行相同操作，您必须打包内容，创建新行和单元格，然后将旧内容添加到新单元格中。笨拙，而且似乎效率较低。有没有更优雅的方法来做到这一点？采用现有行对象的 insertRow 变体会很好。

【讨论】：

【解决方案2】：

如果您使用 dom 方法，则应将 tr 附加到 tbody、thead 或 tfoot 元素，而不是 table 元素。

【讨论】：

取决于结构：（非常）简单的表格不需要，就好像它是用纯HTML编写的一样——它会工作。

【解决方案3】：

insertRow 可能被认为更可靠，因为它是 DOM[1]。

appendChild 方法在所有测试过的浏览器（IE6/7、FF3、Chrome2、Opera9）中始终更快（尽管略微），当在 DOM 之外操作时，，但在尝试修改表时在文档中（更常见的做法）它明显变慢。

换句话说：一定要使用insertRow。

这些测试是在本地进行的，因此可能不可靠，请参阅此处的来源：http://pastie.org/482023

【讨论】：

【解决方案4】：

insertRow 会更好。它是 A 级浏览器的 supported，它不那么冗长且 API 更简洁。

【讨论】：

另外，行并不总是表的子表，这使得 appendChild 方法更加复杂。
可能是的子元素，而不是元素。