Javascript createElement（）与innerHTML何时使用？
我在sql表中有一些数据。我通过JSON将其发送到JavaScript 从那里，我需要将它组合成HTML，以2种方式之一显示给用户Javascript createElement（）与innerHTML何时使用？,javascript,Javascript,我在sql表中有一些数据。我通过JSON将其发送到JavaScript 从那里，我需要将它组合成HTML，以2种方式之一显示给用户 通过组合html字符串并插入holding元素的.innerHTML属性 通过对我需要的每个元素使用createlment（）并直接附加到DOM中 以下两个问题都没有给出可量化的答案 从第一个链接的第一个答案开始，第三个原因（前两个原因不适用于我的环境） 在某些情况下可能会更快 有人能确定createElement（）方法何时更快的基本情况吗？为什么 这样，人们
- 通过组合html字符串并插入holding元素的.innerHTML属性
- 通过对我需要的每个元素使用createlment（）并直接附加到DOM中
研究/链接 添加到DOM n次所需的时间是添加到DOM一次所需时间的n倍。（：P） 这是我个人遵循的逻辑 因此，当它准备创建一个SELECT元素并向其中添加几个选项时，我更喜欢使用innerHTML一次添加所有选项，而不是使用createElement调用n次 这与将批处理操作与“一对一”进行比较有点相同。。。只要你能分解，你就应该
编辑：阅读评论，我了解到有一个特性（DOM DocumentFragment）允许我们节省此类开销，同时利用DOM封装。在这种情况下，如果性能真的相当，我肯定不会怀疑并选择DOM选项。我想我在某个地方读到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>
函数内部（）{
var检验=''；
对于（var i=0；它总是你可以尝试的地方。这不是一个有人可以知道的答案。这取决于你的代码是如何编写的以及你在做什么。唯一真正知道的方法是用这两种方法来测试它。另请参阅上面第二个链接关于片段的第二个答案。这是一个非常有趣的功能。这是为了什么是关于你的担忧我想这是正确的答案…这只适用于旧版本的IE。@Nerrve不，我回答时的chrome版本表现如此。最近我也可以再次确认这一事实。但无论如何，文档片段功能应该是一种方法。