Question

之间最正确的解决方案是什么：

var html="<div>";
for(...){
   html +="asdfgh";
}
html+="</div>";
document.getElementById('test').innerHTML= html;

和

document.getElementById('test').innerHTML="<div>";
for(...){
   document.getElementById('test').innerHTML +="asdfgh";
}
document.getElementById('test').innerHTML +="</div>";

Answer 1

第一种解决方案更好，因为您不必每次迭代都能找到该元素。更新布局。 http://jsperf.com/innerhtmlvsstring

Answer 2

我更喜欢第一个，因为您只需访问dom一次即可添加新元素及其内容。显然有很多其他方法可以做到。

Answer 3

以下更快一点：
不要在循环*

内进行字符串操作

var html;
html.push ( "<div>" );
for(...){
   // html +="asdfgh";  Inside for loop manipualting String is heavy.
   html.push ( "asdfgh" );
}
html.push ( "</div>" );
document.getElementById('test').innerHTML= html.join("\n");

动态html添加到div，什么是最正确的解决方案？

3 个答案: