小编典典

createElement优于innerHTML的优势?

javascript

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


阅读 329

收藏
2020-04-25

共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>
2020-04-25