javascript - javascript document.createElement或HTML标记

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

Javascript:

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

或者

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);

最快，最好的方法是哪一种？

最佳答案

好吧，想一想他们每个人在做什么。第一个是获取字符串，对其进行解析，然后根据已解析的字符串的输出调用document.createElement，document.appendChild等(或类似方法)。第二个原因是减少了浏览器的工作量，因为您直接说明了您要执行的操作。

See a comparison on jsPerf

根据jsPerf的，选项1慢于选项2 3倍。

关于可维护性的主题，选项1编写起来容易得多，但我称之为老式的，我更喜欢使用选项2，因为它感觉更安全。

编辑

在开始出现一些结果之后，不同的结果激起了我的好奇心。我在安装了每个浏览器的情况下运行了两次测试，这是所有测试后jsPerf的结果的屏幕截图(每秒操作数，越高越好)。

因此，浏览器在处理这两种技术的方式上似乎有很大差异。由于Chrome和Safari在选项2方面存在较大差距，因此平均而言，选项2似乎更快。我的结论是，我们应该使用最感觉舒适或最适合您组织标准的方法，而不用担心哪个效率更高。

尽管我听说过很多很棒的事情，但本练习教给我的主要事情是不要使用IE10 。