Question

我正在制作具有以下几个子元素的div：

<div class="item" data-id="28">
    <div class="action-btns">
        <button class="add"></button>
        <button class="rmv"></button>
    </div>
    <div class="info">
        <h3>Title here</h3>
        <span>caption here</span>
    </div>
</div>

即时通讯点击这两个按钮的功能。我想知道创建这些项目的方法更好 - createElement 或 innerHTML ？

至于 createElement 我喜欢它，因为我可以在元素内创建按钮时绑定onclick然后追加它。我也想知道将这个“项目”附加到父div是否比更新innerHTML + =“something”更快/更好;

就 innerHTML 而言，要编写的代码行数较少，但我必须在按钮内写入onclick =“myFunction（）”而不是动态添加它。

请不要jQuery或任何纯粹的Js。感谢您的时间：）

Answer 1

https://jsperf.com/innerhtml-vs-createelement-test（注意我没写这个）

使用createElement，chrome的结果大约低60％ish％。根据（@Sagar V和@Hajji Tarik）的回答，考虑更多的速度。

Answer 2

innerHTML只是放了明文。而createElement创建元素对象并添加到Parent。由于浏览器将纯文本标签转换为HTML元素，因此将其转换为标签。不建议这样做。

createElement是推荐的方法

Answer 3

除了安全之外，使用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>

@Matthew Crumley

的答案

哪种方法更好/更快的性能 - createElement或innerHTML？

3 个答案: