javascript document.createElement或HTML标记 [英] javascript document.createElement or HTML tags

问题描述

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

Javascript：

  document.getElementById（'demoId'）。innerHTML ='< div> hello world和< a>点击我<一个>也< / 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）; 
  

哪种方法最快最好？

解决方案

好吧，想想他们每个人在做什么。第一个是取出字符串，解析它，然后调用 document.createElement ， document.appendChild 等。或类似的方法）基于解析的字符串的输出。第二种方法是减少浏览器的工作负载，因为您直接描述了您希望执行的操作。

查看关于jsPerf的比较

根据jsPerf 选项1约为3时间比选项2慢。

关于可维护性选项1的选项要容易得多，但要求我老掉牙，我宁愿使用选项2，因为它只是感觉更安全。

编辑

开始进来，不同的结果激起我的好奇心。我安装了每个浏览器后运行了两次测试，下面是所有测试（操作/秒，越高越好）后jsPerf结果的屏幕截图。

因此，浏览器似乎差别很大他们如何处理这两种技术。平均来看，选项2似乎更快，这是由于Chrome和Safari的差距偏大选项2.我的结论是，我们应该使用最适合您组织标准的最舒适或最符合您的组织标准，而不用担心哪个更有效。 / p>

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

I am confused on following style of writing code. I want to know which is the practical and efficient method to insert HTML tag in document.

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?

解决方案

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.

See a comparison on jsPerf

According to jsPerf option 1 is approximately 3 times slower than option 2.

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.

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

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.

The main thing this exercise has taught me is to not use IE10 despite the great things I've heard about it.

这篇关于javascript document.createElement或HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！