24

我对以下编写代码的风格感到困惑。我想知道在文档中插入 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);

哪种方法最快最好？

4

1 回答 1

24

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

查看 jsPerf 上的比较

根据 jsPerf option 1 比 option 2 慢大约 3 倍。

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

编辑

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

jsPerf 结果

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

这个练习教会我的主要事情是不要使用 IE10，尽管我听说过它很棒。

于 2013-03-03T04:29:17.287 回答