createElement超出innerHTML的优点？ [英] Advantages of createElement over innerHTML?

问题描述

在实践中，使用createElement与innerHTML有什么优势？我问的是，因为我相信使用innerHTML在性能和代码可读性/可维护性方面更有效率，但是我的队友已经使用createElement作为编码方法了。我只想了解createElement如何更有效率。

In practice, what are the advantages of using createElement over innerHTML? I am asking because I'm convinced that using innerHTML is more efficient in terms of performance and code readability/maintainability but my teammates have settled on using createElement as the coding approach. I just wanna understand how createElement can be more efficient.

推荐答案

使用 createElement 而不是修改 innerHTML （而不仅仅是抛弃已经存在的东西，并取代它）除了安全性，像Pekka已经提到：

There are several advantages to using createElement instead of modifying innerHTML (as opposed to just throwing away what's already there and replacing it) besides safety, like Pekka already mentioned:

当您附加（或以其他方式修改） innerHTML 时，所有DOM该元素内的节点必须重新解析并重新创建。如果您保存对节点的任何引用，它们将基本上是无用的，因为它们不再显示出来。

When you append to (or otherwise modify) innerHTML, all the DOM nodes inside that element have to be re-parsed and recreated. If you saved any references to nodes, they will be essentially useless, because they aren't the ones that show up anymore.

这真的只是最后一个的特殊情况（虽然很常见）。设置 innerHTML 不会自动将事件处理程序重新附加到其创建的新元素中，因此您必须自己跟踪它们，并手动添加它们。在某些情况下，事件委托可以消除这个问题。

This is really just a special case (although common) of the last one. Setting innerHTML will not automatically reattach event handlers to the new elements it creates, so you would have to keep track of them yourself and add them manually. Event delegation can eliminate this problem in some cases.

如果正在做很多补充，你绝对不想重新设置 innerHTML ，因为尽管更简单的更改，反复重新解析和创建元素会更慢。解决这个问题的方法是在字符串中建立HTML，并在完成后设置 innerHTML 一次。根据情况，字符串操作可能比仅仅创建元素和追加它们要慢。

If you are doing lots of additions, you definitely don't want to keep resetting innerHTML because, although faster for simple changes, repeatedly re-parsing and creating elements would be slower. The way to get around that is to build up the HTML in a string and set innerHTML once when you are done. Depending on the situation, the string manipulation could be slower than just creating elements and appending them.

另外，字符串操作代码可能会更复杂（特别是如果你想要的话为了安全起见）

Additionally, the string manipulation code may be more complicated (especially if you want it to be safe).

这里有一个我有时使用的功能，使它更方便使用 createElement 。 p>

Here's a function I use sometimes that make it more convenient to use createElement.

function isArray(a) {
    return Object.prototype.toString.call(a) === "[object Array]";
}

function make(desc) {
    if (!isArray(desc)) {
        return make.call(this, Array.prototype.slice.call(arguments));
    }

    var name = desc[0];
    var attributes = desc[1];

    var el = document.createElement(name);

    var start = 1;
    if (typeof attributes === "object" && attributes !== null && !isArray(attributes)) {
        for (var attr in attributes) {
            el[attr] = attributes[attr];
        }
        start = 2;
    }

    for (var i = start; i < desc.length; i++) {
        if (isArray(desc[i])) {
            el.appendChild(make(desc[i]));
        }
        else {
            el.appendChild(document.createTextNode(desc[i]));
        }
    }

    return el;
}

如果你这样打电话：

make(["p", "Here is a ", ["a", { href:"http://www.google.com/" }, "link"], "."]);

你得到相当于这个HTML：

you get the equivalent of this HTML:

<p>Here is a <a href="http://www.google.com/">link</a>.</p>

这篇关于createElement超出innerHTML的优点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！