javascript - 什么时候使用基于 DOM 的生成与使用 strings/innerHTML/JQuery 生成 DOM 内容？

Question

我想知道何时使用基于 DOM 的生成与 .innerHTML 或使用 JQuery 的 .append 方法附加字符串？我在这里读了一篇相关文章Should you add HTML to the DOM using innerHTML or by creating new elements one by one?但我仍然不确定每种方法的用例。这是否只是性能问题，我总是选择其中一种而不是另一种？

假设 form 是一个任意变量:

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>")

Answer 1

第二个更具可读性，尽管它来自 jQuery，它为您提供了 insideHTML 的工作。在普通 JS 中，它会是这样的:

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

...我认为它甚至胜过 jQuery。尽管如此，您不应该担心性能。性能始终取决于要插入的节点数量 - 对于单个节点，HTML 解析器会比直接创建它们慢，对于大型 HTML 字符串， native 解析器比脚本更快。如果您确实担心性能，则需要测试、测试、测试(我想说您的应用程序有问题)。

然而，这两种方法之间存在很大差异:使用#1，您将拥有三个引用 DOM 元素的变量。例如，如果您想向输入添加事件监听器，您可以立即执行此操作，而无需在 form 上调用 querySelector，这会慢得多。当然，当插入很多元素时(使用innerHTML)，您根本不需要这样做，因为您将使用 delegated events那么真正的性能提升。

请注意，您还可以使用 jQuery 将方法 #1 缩短为 oneliner:

var div, label, input;
$(form).append(div=$("<div/>").append(input=$("<input/>"),label=$("<label/>")));

<小时/>

我的结论:

• 对于仅创建少量元素，DOM 方法更为简洁。
• 大多数情况下，html 字符串更具可读性。
• 在标准情况下，两者都不更快 - 基准测试结果差异很大。

就个人而言，我不喜欢(直接)innerHTML，原因有几个，these 中对此进行了详细概述。 two答案和here以及。此外，IE 在表格上有一个错误(请参阅 Can't set innerHTML on tbody in IE )