JavaScript document.createElement 或 HTML 标签

Question

我可以帮您翻译成中文。这段文字是关于编程的，作者对如何在文档中插入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);

哪种方法最快且最好？

- blue ghhgdtt

---

你为什么想要创建这样的HTML标签？ - Head

你可以在Chrome上进行JavaScript性能分析来衡量它。 - user1428716

大家可能认为我疯了，但如果你创建了这个网站并让我来维护它，我更喜欢你尽可能使用选项1，避免使用选项2。此外，我无法想象选项2会比选项1更快。 - Mike C.

Answer 1

想一想每个选项在做什么。第一个选项将字符串解析后，根据解析后的输出调用document.createElement， document.appendChild等方法（或类似的方法）。第二个选项则减轻了浏览器的工作负载，因为您直接说明了想要它做什么。

请看jsPerf上的比较

根据jsPerf的测试结果，选项1比选项2慢大约3倍。

就可维护性而言，选项1更容易编写，但是请叫我老派，我更喜欢使用选项2，因为它看起来更加安全。

编辑

在收到一些结果后，不同的结果引起了我的好奇心。我在每个浏览器中运行了两次测试，这里是jsPerf测试结果的截图 (操作/秒，数字越高越好)。

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

这个练习教给我的主要是不要使用IE10，尽管我听说它有很多好处。

- Daniel Imms

---

这很棒 :) 这是我第二次使用它。 - Daniel Imms

我无法理解为什么这是真的，看一下这篇文章，它非常启发人心：https://dev59.com/UHE95IYBdhLWcg3wdtmj - Mike C.

@tyriar，第二个会增加文件大小，这不会使网站更重吗？ - blue ghhgdtt

我在使用Chrome，顺便说一下，从Firefox 19得到了有趣的结果我想更重要的是使用哪个浏览器。 - Daniel Imms

IE11在我的机器上甚至没有一点点更快。 - Sebastian