将一大段代码插入 DOM 的 Javascript jQuery 最佳方法答案

【问题标题】：Javascript jQuery best way to insert a big piece of code into DOM将一大段代码插入 DOM 的 Javascript jQuery 最佳方法
【发布时间】：2011-04-09 17:01:40
【问题描述】：

我有一大段代码需要在某个时候插入到 DOM 中。该代码还包含一些变量：

<ul id="info'+value+'" class="info"><li class="hide"></li><li class="lock"><ul>
// just a piece of the code with variable "value"

现在我在做：

var codeToInsert = "<some code/>"
codeToInsert.insertAfter('#someID');

从性能的角度来看，有没有更好的方法？

【问题讨论】：

你能扩展一个html代码的小例子吗？这段代码是通过 ajax 来的吗？，这可以是一些分隔符来分割 html 代码，每个 json 的一部分吗？

标签： jquery performance dom insert

【解决方案1】：

如果您想插入大段代码，请使用 jQuery 作为其选择器，然后使用 innerHTML DOM 属性 - 这是插入大段 HTML 的最快方法。不要包装要插入到 JQuery 中的字符串，将其保留为字符串。

例如：$('#somePlaceholder')[0].innerHTML = myHTMLString;.

http://www.quirksmode.org/dom/w3c_html.html:

一般而言，innerHTML 比普通的 DOM 方法快，因为 HTML 解析器总是比 DOM 引擎快。如果要进行复杂的更改，请使用 innerHTML。（对于简单的更改，您使用哪种方法并不重要，尽管理论上 innerHTML 仍然更快。）

如果您在 JS 中进行字符串连接，请创建一个数组，push() 部分和 join() 在末尾而不是附加例如+= 或 +。它有所作为，尤其是。在 IE 中。

【讨论】：

【解决方案2】：

在我看来，您还可以使用 .append()、.appendT()、.before()、.after() 等。请查看这些函数的范围：http://api.jquery.com/category/manipulation/

【讨论】：

我怀疑这会产生任何影响，性能方面。做本质上相同的事情只是语法略有不同。
我认为唯一可以节省性能的地方是选择要插入代码的位置。不要认为它们在性能方面有那么大的不同。但还是看看，看看你是否找到一个比另一个更好的。
insertAfter() 使我可以将其放置在我想要的位置，因为 append() 会将其放置到需要创建或已经存在的 div 中。也可以是带有附加功能的圆顶，但它们的语义可能与性能相同......
我认为 .insertxxx 会在您遍历子元素时效果更好，而 .appendxxx 如果您想移动到特定对象（其与兄弟元素的关系不相关）会更好。有点扭曲，但这是我认为使用其中一个而不是另一个的最佳理由。