createElement()和innerHTML哪个更适合使用？何时使用它们？

Question

createElement()和innerHTML哪个更适合使用？何时使用它们？

javascript

9

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

从那里，我需要通过以下两种方式之一将其组合成HTML以显示给用户。

1. 通过组合html字符串并插入到持有元素的.innerHTML属性中 2. 通过为每个所需元素使用createElment()并直接附加到DOM中

以下问题都没有提供可量化的答案。

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

可能在某些情况下更快

有人能够建立createElement()方法更快的基准案例吗？为什么？

这样人们可以根据自己的环境做出明智的选择。

在我的情况下，我不关心保留现有的DOM结构或事件侦听器。只关心效率（速度）。

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

研究/链接

createElement相对于innerHTML的优势是什么？

JavaScript：使用innerHTML还是（大量）createElement调用来添加复杂的div结构更好？

- user656925

3

你可以尝试使用jsperf来测试一些东西。 - Pointy

这不是一个人们可以轻易知道的答案。它取决于你的代码编写方式和你正在做什么。唯一真正了解的方法是使用两种方法进行测试。 - j08691

请参阅是否可以在不破坏后代事件监听器的情况下追加innerHTML？ - Bergi

2个回答

3

我曾在某处读到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>

在这个例子中，使用createElement - appendChild方法输出HTML的速度比使用innerHTML/jQuery要快得多！

- NoBugs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sebas · Accepted Answer

将内容添加到DOM中，如果需要添加n次，则比仅添加一次需要花费n倍的时间。(:P)

这是我个人所遵循的逻辑。

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

这有点类似于将BATCH操作与“一对一”进行比较...无论何时可以因式分解，都应该这样做！

编辑：阅读评论后，我了解到有一种功能（DOM DocumentFragment）可以使我们节省此类开销，同时利用DOM封装。在这种情况下，如果性能真的可以相比，我肯定不会怀疑并选择DOM选项。