createElement() 与 innerHTML 什么时候使用？答案

【问题标题】：createElement() vs. innerHTML When to use?createElement() 与 innerHTML 什么时候使用？
【发布时间】：2012-06-04 21:53:31
【问题描述】：

我在 sql 表中有一些数据。我通过 JSON 将它发送到我的 JavaScript。

从那里我需要将其组合成 HTML，以便通过 2 种方式中的一种方式向用户显示。

通过编写 html 字符串并插入到持有元素的 .innerHTML 属性中
通过对我需要的每个元素使用 createElment() 并直接附加到 DOM 中

以下问题均未给出可量化的答案。

从第一个链接的第一个答案开始，第三个原因（前两个原因不适用于我的环境）

在某些情况下可能会更快

有人可以建立一个基本案例，什么时候 createElement() 方法更快，为什么？

这样人们就可以根据他们的环境做出有根据的猜测。

就我而言，我不担心保留现有的 DOM 结构或事件侦听器。只是效率（速度）。

我没有使用关于我提供的第二个链接的库。但它是为那些可能的人准备的。

研究/链接

Advantages of createElement over innerHTML?

JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?

【问题讨论】：

总有jsperf 可以让您尝试。
这不是一个人就能知道的答案。这取决于您的代码是如何编写的以及您在做什么。唯一真正知道的方法是使用这两种方法对其进行测试。
另见Is it possible to append to innerHTML without destroying descendants' event listeners?

标签： javascript

【解决方案1】：

添加到 DOM n 次需要 n 倍的时间比添加到 DOM 一次。 (:P)

这是我个人遵循的逻辑。

因此，例如，当它要创建一个 SELECT 元素并向其添加多个选项时，我更喜欢使用 innerHTML 一次添加所有选项而不是使用 createElement 调用 n 次。

这有点像将 BATCH 操作与“一对一”进行比较...只要您可以分解，就应该这样做！

编辑：阅读 cmets 我知道有一个功能（DOM DocumentFragment）可以让我们节省此类开销，同时利用 DOM 封装。在这种情况下，如果性能真的有可比性，我绝对不会怀疑并选择了 DOM 选项。

【讨论】：

查看上面关于片段的第二个链接的第二个答案
是的，这是一个非常有趣的功能。对于您关心的问题，我想这是正确的答案...
这仅适用于旧版本的 IE。
@Nerrve 不，我在回答时的 chrome 版本就是这样。最近我也可以再次证实这个事实。但无论如何，文档片段功能应该是方法。

【解决方案2】：

我以为我在某处读到 createElement 和 appendElement 更快。这是有道理的，考虑到 document.write() 和 innerHTML 必须解析一个字符串，和也创建和附加元素。我写了一个快速测试来确认这一点：

<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function inner() {

    var test = '';
    for (var i=0; i<10000; i++) {
        test += '<p><a href="../" target="_blank">bogus link</a> with some other <strong>stuff</strong></p>';
    }

    console.time('innerHTML');
    document.getElementById('test').innerHTML = test;
    console.timeEnd('innerHTML');
}

function jq() {
    var test = '';
    for (var i=0; i<10000; i++) {
        test += '<p><a href="../" target="_blank">bogus link</a> with some other <strong>stuff</strong></p>';
    }

    console.time('jquery');
    jQuery('#test').html(test);
    console.timeEnd('jquery');
}

function createEl() {
    var dest = document.getElementById('test');

    console.time('createel');
    //dest.innerHTML = '';//Not IE though?
    var repl = document.createElement('div');
    repl.setAttribute('id','test');
    for (var i=0; i<10000; i++) {
        var p = document.createElement('p');
        var a = document.createElement('a');
        a.setAttribute('href','../'); a.setAttribute('target','_blank');
        a.appendChild(document.createTextNode("bogus link"));
        p.appendChild(a);
        p.appendChild(document.createTextNode(" with some other "));
        var bold = document.createElement('strong');
        bold.appendChild(document.createTextNode("stuff"));
        p.appendChild(bold);
        repl.appendChild(p);
    }
    dest.parentNode.replaceChild(repl,dest);
    console.log('create-element:');
    console.timeEnd('createel');
}
</script>
<button onclick="inner()">innerhtml</button>
<button onclick="jq()">jquery html</button>
<button onclick="createEl()">Create-elements</button>
<div id="test">To replace</div>
</body>
</html>

在这个例子中，写出 HTML 的 createElement - appendChild 方法比 innerHTML/jQuery 快得多！

【讨论】：