createElement优于innerHTML的优势？

Question

在实践中，相比于innerHTML，使用createElement有什么优势？我之所以问是因为，我坚信使用innerHTML在性能和代码可读性/可维护性方面会更加有效，但是我的团队成员已经决定使用createElement作为编码方法。我只是想了解createElement如何更有效。

Answer 1

除了安全之外，使用其他方法还具有一些优点，createElement而不是修改innerHTML（而不是仅仅丢弃已有的内容并替换它），例如Pekka已经提到的：

追加元素时保留对DOM元素的现有引用

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

保留附加到任何DOM元素的事件处理程序

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

在某些情况下可能更简单/更快

如果您要进行大量添加操作，则绝对不希望继续进行重置，innerHTML因为尽管对于简单的更改来说速度更快，但是反复重新解析和创建元素会更慢。解决该问题的方法是在字符串中构建HTML，并innerHTML在完成后设置一次。根据情况的不同，字符串操作可能比仅创建元素和附加元素要慢。

此外，字符串操作代码可能更复杂（特别是如果您希望它是安全的）。

这是我有时使用的功能，它使使用起来更加方便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等效的代码：

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