javascript document.createElement或HTML標記

我很困惑以下風格的編寫代碼。我想知道哪個是實用的和有效的方法在文檔中插入HTML標籤。javascript document.createElement或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);

這是最快，最好的方法是什麼？

來源

2013-03-03 blue ghhgdtt

你爲什麼要創建這樣的html標籤？ – Supplement 2013-03-03 04:18:40

你可以在Chrome上做java腳本分析來測量這個 – user1428716 2013-03-03 04:21:10

每個人都可能會說我瘋了，但是如果你創建了這個站點，然後我不得不維護它，我寧願你使用選項1，並避免選項2越長越好。另外，我無法想象選項2比選項1更快。 – 2013-03-03 04:21:31

嗯，想想他們每個人在做什麼。第一個是取出字符串，解析它，然後根據解析字符串的輸出調用document.createElement,document.appendChild等（或類似的方法）。第二種方法是減少瀏覽器的工作負載，因爲您直接描述了您希望執行的操作。

See a comparison on jsPerf

根據jsPerf 選項1大約比選擇2慢3倍。

關於可維護性的問題選項1比寫起來容易得多，但稱之爲舊式，我更願意使用選項2，因爲它感覺更安全。

編輯

經過幾次的結果開始進來的時候，在不同的結果激起了我的好奇心。我安裝了每個瀏覽器後運行了兩次測試，下面是所有測試（操作/秒，更高更好）後jsPerf結果的屏幕截圖。

jsPerf results

所以瀏覽器似乎在如何處理這兩種技術有很大的不同。平均來看，選項2似乎更快，這是由於Chrome和Safari的差距偏大選項2.我的結論是，我們應該使用最舒適或最符合貴組織標準的選項，而不必擔心哪個更有效。

這個練習教會了我最主要的是不使用IE10儘管偉大的事情我聽說過它。

來源

2013-03-03 04:29:17

這是值得它瞭解該網站。 – 2013-03-03 04:35:14

這真是太棒了:)第二次我用它。 – 2013-03-03 04:35:44

我無法理解爲什麼這是真的，看看這篇文章，這是非常有啓發性的：http://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode – 2013-03-03 04:40:30

javascript document.createElement或HTML標記

回答

相關問題