在现有行之后插入表格行答案

【问题标题】：Insert Table Rows After an Existing Row在现有行之后插入表格行
【发布时间】：2012-04-27 17:14:34
【问题描述】：

我有一个 MVC 应用程序，其中一个页面通过 ajax 调用一个控制器方法，然后返回一个包含大量表行的局部视图。请注意，不会返回完整的表格，而只会返回表格行。

我需要在表格中的特定位置添加这些表格行。我有一个对表的引用，需要在之后添加行（或者在添加新行之后，实际上引用的行将被删除）。使用 jQuery 这将非常简单：

$(newRows).insertAfter(tr);
tr.remove();

问题是 newRows html 可能非常大，我发现通过 jQuery 插入它们可能需要相当长的时间。在没有 jQuery 的情况下插入行，仅通过纯 javascript 更快。

我的问题是我一生都无法弄清楚如何在给定表格行之后或之前插入新行。我已经尝试过 insertBefore、insertAfter 和 appendTo 方法，但问题是 newRows 变量只是一个 html 字符串而不是实际的 DOM 节点。有没有办法在引用表格行之前或之后插入 html 而不必将表格行的 html 字符串转换为 DOM 元素？

【问题讨论】：

你能提供一个 jsfiddle 例子来说明你的问题吗
DOM 不是字符串。为什么不正确地创建行？
“正确”是相对的。它们正在正确创建，但必须用数据库中的数据填充。这是一个 ASP.NET MVC 应用程序，我正在利用它返回一个局部视图，其中包含所有“正确”形成的表行，这些行将占用大量 javascript 和客户端逻辑来创建。

标签： javascript html-table

【解决方案1】：

您可以尝试返回一个对象数组（json）并使用该数组通过JS创建新行并将它们附加到您想要的位置。

【讨论】：

这是一种可能性，但在生成 HTML 行时需要相当多的逻辑，并且在 javascript 中复制该逻辑将是可怕的。

【解决方案2】：

您可以使用 innerHTML，但在您的情况下需要考虑一下，因为您只想追加行，而不是完全覆盖内容。使用 innerHTML 总是比 DOM 操作更快。也许您可以将这些行放在一个新表中，但将表放在现有表的下方以使其看起来像它的一部分？就个人而言，我对 jquery 的速度很好奇，我发现 jquery 通常不是问题的根源，更多的是它是如何使用的-

【讨论】：

文档片段建议也不错，如果您使用我建议的 innerHTML 方法，这是很自然的方法-

【解决方案3】：

转换字符串的方法是创建一个空 div 并将字符串设置为 innerHTML。它们将被转换为 DOM，并可通过 div childNodes 访问；

然后你可以使用一个文档片段插入所有的 DOM 元素，使用 appendChild()

完成后，您只需插入文档片段，因此在实际文档上只插入一个而不是多个。

一篇关于文档片段的好文章http://ejohn.org/blog/dom-documentfragments/

【讨论】：