createElement 相对于innerHTML 的优势? [英] Advantages of createElement over innerHTML?

问题描述

在实践中，相比于innerHTML，使用createElement 有什么优势?我之所以这么问是因为我确信使用 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 更方便.

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屋！