javascript document.createElement或HTML标记

Question

我很困惑以下风格的编写代码。我想知道哪个是实用的和有效的方法在文档中插入HTML标签。

的Javascript：

document.getElementById('demoId').innerHTML='<div>hello world and <a>click me</a> also</div>'; 

OR

var itd=document.createElement('div'), 
    ita=document.createElement('a'), 
    idt=document.createTextNode('hello world'); 
    iat=document.createTextNode('click me'); 
    idn=document.createTextNode('also'); 

    ita.appendChild(iat); 
    itd.appendChild(idt); 
    itd.appendChild(ita); 
    itd.appendChild(idn) 

    docuemtn.getElementById('demoId').appendChild(itd); 

这是最快，最好的方法是什么？

Answer 1

嗯，想想他们每个人在做什么。第一个是取出字符串，解析它，然后根据解析字符串的输出调用document.createElement,document.appendChild等（或类似的方法）。第二种方法是减少浏览器的工作负载，因为您直接描述了您希望执行的操作。

See a comparison on jsPerf

根据jsPerf 选项1大约比选择2慢3倍。

关于可维护性的问题选项1比写起来容易得多，但称之为旧式，我更愿意使用选项2，因为它感觉更安全。

编辑

经过几次的结果开始进来的时候，在不同的结果激起了我的好奇心。我安装了每个浏览器后运行了两次测试，下面是所有测试（操作/秒，更高更好）后jsPerf结果的屏幕截图。

所以浏览器似乎在如何处理这两种技术有很大的不同。平均来看，选项2似乎更快，这是由于Chrome和Safari的差距偏大选项2.我的结论是，我们应该使用最舒适或最符合贵组织标准的选项，而不必担心哪个更有效。

这个练习教会了我最主要的是不使用IE10尽管伟大的事情我听说过它。