Javascript 什么时候使用基于DOM的生成，而不是使用strings/innerHTML/JQuery生成DOM内容？

我想知道什么时候应该使用基于DOM的生成而不是.innerHTML，或者使用JQuery的.append方法来追加字符串？我在这里读了一篇相关的文章，但我仍然不确定每种方法的使用情况。我总是选择一种方法而不是另一种方法，这只是性能问题吗

假设形式是一个任意变量：

DOM生成

            var div = document.createElement("div"),
            label = document.createElement("label"),
            input = document.createElement("input");

            div.appendChild(label);
            div.appendChild(input);

            form.appendChild(div);

JQuery

           $(form).append("<div><label></label><input></input></div>")

$（表格）。追加（“”）

这只是性能问题。选择一个最适合你的

---

jsPerf中充满了这些性能测试，比如这一个：

第二个更具可读性，尽管它来自jQuery，它为您提供了innerHTML。在vanilla JS中，它是这样的：

form.insertAdjacentHTML("beforeend", "<div><label></label><input></input></div>");

---

我的结论是：

• 对于只创建很少的元素，DOM方法更干净
• 通常，html字符串更具可读性
• 在标准情况下，这两种方法的速度都不快——基准测试结果差异很大

---

就我个人而言，我不喜欢（直接）

innerHTML

，原因有几个，答案和答案中都有很好的概括。此外，IE在表上有一个bug（请参见）

一般来说，反复访问DOM要比用innerHTML替换一大块HTML慢得多。我相信有两个原因。一个是回流焊。浏览器必须重新调整布局，以应对可能广泛的元素之间的潜在布局影响。另一个，我相信，如果我错了，有人会纠正我，那就是在浏览器的编译后执行环境中，将渲染和布局状态处理成可以在JavaScript中使用的对象，这会带来一些开销。由于DOM经常处于不断变化的条件下，因此每次都必须运行该过程，几乎没有机会缓存任何类型的结果，甚至可能达到某种程度，即使您只是创建新元素而没有添加它们（因为您可能需要预处理CSS规则以及诸如浏览器由于doctype而处于的“模式”等，这些规则可以预先应用于一般上下文）

DOM方法允许您构造文档片段，并在不影响实际文档布局的情况下创建和附加HTML元素，这有助于避免不必要的回流

但这就是奇怪的地方

• 在许多（大多是较旧的）浏览器中，将新HTML插入到一个没有任何内容的节点（靠近领带或其他东西）通常要快得多

• 替换大量HTML内容——实际上，当性能不太接近调用时，DOM方法往往会胜出

基本上，如果innerHTML有问题的话，它在发生大规模交换的拆卸过程中往往会有问题。DOM方法在拆卸方面更好，但在创建新的HTML和直接注入方面往往会更慢，而在有任何显著差异的情况下，不会替换任何内容

事实上，有一些混合方法可以在您需要的时候为性能做非常出色的事情。我在一年多前使用过一种方法，并且对将大量HTML内容交换为延迟加载网格而不是仅使用innerHTML的响应时间改进留下了深刻的印象。我希望我能找到一个指向dese的人的链接RVE的功劳是在网络上发现并解释了这一点（作者，也写了很多RegEx的东西——我一辈子都不能用谷歌搜索）

就样式与性能而言，我认为您应该避免反复调整实际的DOM节点结构，但事先在文档片段中构建HTML与使用innerHTML几乎是一个判断问题。我个人最喜欢innerHTML，因为JS有很多强大的字符串方法，可以快速将数据转换为HTML就绪字符串。例如：

var htmlStr = '<ul><li>' + arrayOfNames.join('</li><li>') + '</li></ul>';

var htmlStr='
'+arrayOfNames.join（'
'）+'
'；

这一行代码是一个UL，我可以直接分配给innerHTML。用正确的数据结构和简单的while循环构建完整的表几乎是一样容易的。现在用DOM API用尽可能多的LIs和arrayOfNames的长度来构建相同的UL。我真的想不出有什么好的理由对自己这样做。innerHTML变成了de fac在最终被纳入HTML5规范之前，它可能不适合DOM API中基于节点的htmlElement对象调整方法，但它功能强大，可以帮助您保持代码简洁易读。但是，我不太可能使用innerHTML来编辑和替换现有内容。使用数据更安全，构建和交换新的HTML，而不是引用旧的HTML，然后开始解析属性的innerHTML字符串，等等，当您有了方便且准备好的DOM操作方法时

---

您主要的性能问题应该是避免重击DOM的“活动”部分，但剩下的部分我将留给人们在HTML生成方面的风格和测试。然而，innerHTML已经在HTML5工作草案中存在多年，并且在现代浏览器中是相当一致的。在Chrome出现之前，它也是事实上的规范，在Chrome出现之前，它作为一个选项是完全可行的，但这是一个争论，在这一点上，主要是这样做的。

看看这两个代码示例，第二个不仅更短、可读性更强、速度更快，我看不出有任何理由使用直接DOM操作。结束

标记？有效吗？@DavidThomas正确，（HTML）没有结束标记（但XML有，如图所示：）。这可能是使用createElement（）函数的另一个原因，它们总是为您提供正确的标记。否。浏览器不会在每次DOM操作后回流/重新绘制。它将

var htmlStr = '<ul><li>' + arrayOfNames.join('</li><li>') + '</li></ul>';