javascript document.createElement 或 HTML 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15182402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript document.createElement or HTML tags
提问by blue ghhgdtt
I am confused on following style of writing code. I want to know which is the practicaland efficientmethod to insert HTML tag in document.
我对以下编写代码的风格感到困惑。我想知道在文档中插入HTML标签的实用且有效的方法是什么。
Javascript:
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);
Which is the fastest and best method?
哪个是最快和最好的方法？
回答by Daniel Imms
Well just think about what each of them are doing. The first one is taking the string, parsing it and then calling document.createElement, document.appendChild, etc. (or similar methods) based on the output from the parsed string. The second is reducing the work load on the browser as you're stating directly what you want it to do.
好吧，想想他们每个人都在做什么。第一个是采取串，解析它然后调用document.createElement，document.appendChild根据从解析的串的输出，等等（或类似方法）。第二个是减少浏览器上的工作负载，因为您直接说明了您想要它做什么。
According to jsPerf option 1 is approximately 3 times slower than option 2.
根据 jsPerf选项 1 大约比选项 2 慢 3 倍。
On the topic of maintainability option 1 is far easier to write but call me old fashioned, I'd prefer to use option 2 as it just feels much safer.
关于可维护性的主题，选项 1 更容易编写，但称我为老式，我更喜欢使用选项 2，因为它感觉更安全。
Edit
编辑
After a few results started coming in, the differing results piqued my curiosity. I ran the test twice with each of my browsers installed, Here is a screenshot of the results from jsPerf after all the tests (operations/second, higher is better).
在一些结果开始出现后，不同的结果激起了我的好奇心。我在安装了每个浏览器的情况下运行了两次测试，这是所有测试后 jsPerf 的结果截图（操作数/秒，越高越好）。
So browsers seem to differ greatly in how they handle the two techniques. On average option 2 seems to be the faster due to Chrome and Safari's large gap favouring option 2. My conclusion is that we should just use whichever feels the most comfortable or fits best with your organisation's standards and not worry about which is more efficient.
所以浏览器在处理这两种技术的方式上似乎有很大不同。平均而言，选项 2 似乎更快，因为 Chrome 和 Safari 支持选项 2 的差距很大。我的结论是，我们应该只使用感觉最舒适或最符合您组织标准的那个，而不用担心哪个更有效。
The main thing this exercise has taught me is to not use IE10despite the great things I've heard about it.
这个练习教会我的主要事情是不要使用 IE10，尽管我听说过它很棒。
