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.我的结论是我们应该使用最舒适或最适合您组织标准的那个，而不用担心哪个更有效。< / p>

这项练习告诉我的主要内容是 不使用IE10 ，尽管我听说过它很棒。