createElement() 与 innerHTML 啥时候使用？
Posted
技术标签:
【中文标题】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? 【参考方案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 快得多！
【讨论】：
以上是关于createElement() 与 innerHTML 啥时候使用？的主要内容，如果未能解决你的问题，请参考以下文章
createElement 与 createElementNS