createElement 相对于innerHTML 的优点？

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

使用有几个优点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>