什么时候使用基于DOM的Generation与使用strings / innerHTML / JQuery来生成DOM内容？ [英] When do you use DOM-based Generation vs. using strings/innerHTML/JQuery to generate DOM content?

问题描述

我想知道什么时候使用基于DOM的生成与.innerHTML或使用JQuery的.append方法附加字符串？我在这里阅读了相关文章你应该使用innerHTML或者通过一个接一个地创建新的元素来添加HTML吗？但是我仍然不确定每个方法的用例。只是一个性能问题我总是选择一个对方？

I was wondering when to use DOM-based generation versus .innerHTML or appending strings using JQuery's .append method? I read a related post here Should you add HTML to the DOM using innerHTML or by creating new elements one by one? but I'm still unsure of the use case for each method.Is it just a matter of performance where I would always choose one over the other?

我们假设表单是一个任意变量：

Let's say that form is an arbitrary variable:

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

推荐答案

第二个更可读，虽然来自jQuery innerHTML是否适合您。在香草JS中，将是这样的：

The second one is more readable, although that comes from jQuery which does the innerHTML work for you. In vanilla JS, it would be like this:

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

...我认为甚至是jQuery。虽然，您不应该担心性能。性能总是取决于要插入的节点数量 - 对于单个节点，HTML解析器比直接创建它们要慢，对于大型HTML字符串，本地解析器比脚本更快。如果你真的担心性能，你需要测试，测试，测试（我会说你的应用程序有问题）。

...which I think beats even jQuery. Although, you should not worry about performance. The performance always depends on the amount of nodes to insert - for single ones, the HTML parser would be slower than creating them directly, for large HTML strings the native parser is faster than the script. If you really do worry about performance, you will need to test, test, test (and I'd say there is something wrong with your app).

然而，那里这两种方法有很大的区别：＃1，你有三个变量引用了DOM元素。如果您希望为输入添加事件侦听器，则可以立即执行此操作，并且不需要在表单上调用querySelector，这将更慢。当然，当使用innerHTML插入很多元素时，您根本不需要这样做，因为您将使用委托事件，以实现性能提升。

Yet, there is a great difference between the two methods: With #1, you have three variables with references to the DOM elements. If you would for example like to add an event listener to the input, you can immediately do it and don't need to call a querySelector on form, which would be much slower. Of course, when inserting really many elements - with innerHTML -, you wouldn't need to do that at all because you would use delegated events for a real performance boost then.

请注意，您也可以缩短方法＃1与jQuery到oneliner：

Note that you can also shorten method #1 with jQuery to a oneliner:

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

---

我的结论：

---

My conclusion:

• 只能创建少量元素，DOM方法更干净。


• 大多数情况下，html字符串更易读。


• 在标准情况下，两者都不会更快 - 基准测试结果有所不同。

个人而言，我不喜欢（直接） innerHTML ，原因如下：这些 两个答案和这里也是如此。此外，IE在表上有错误（请参阅无法在IE中设置innerHTML））

Personally, I don't like (direct) innerHTML for a few reasons, which are outlined well in these two answers and here as well. Also, IE has a bug on tables (see Can't set innerHTML on tbody in IE)

这篇关于什么时候使用基于DOM的Generation与使用strings / innerHTML / JQuery来生成DOM内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！