createElement（）如何與innerHTML一起使用？

我有以下的代碼非常創建一個div元素，無論是內部的，並將它置於createElement（）如何與innerHTML一起使用？

function create(htmlStr) { 
    var frag = document.createDocumentFragment(), temp = document.createElement('div'); 
    temp.innerHTML = htmlStr; 
    while (temp.firstChild) { 
     frag.appendChild(temp.firstChild); 
    } 
    return frag; 
} 

var fragment = create('<div id="test">HELLO</div>'); 
document.body.insertBefore(fragment, document.body.childNodes[0]);

我，但是，困惑，爲什麼我們創建另一個 divtemp = document.createElement('div'); 如果我們已經通過<div id="test">HELLO</div>到create()的功能。似乎我會創建一個div內的div（但它不會）。或者只是用temp.firtChild解壓？
自從temp開始做temp.innerHTML = htmlStr;是div？

來源

2013-01-05 CodeCrack

你的'while'看起來像永無止境。 – techfoobar

Nothing持續永久 –

@techfoobar - 當調用appendChild（）時，作爲temp的子元素被從temp移除併成爲frag的一個子元素。 – gilly3

要回答你的第一個問題，它基本上創建了一個父div來包含htmlStr，這恰好是<div id="test">HELLO</div>。因此，基本上，這行代碼本身只是生成一個div，但這個temp div然後被用來包含htmlStr作爲一個孩子。但是，你是對的;以後只需提取temp div;它幾乎沒用。如果沒有其他代碼需要考慮，我不知道爲什麼會出現這種情況。

至於問題2，它所做的只是使htmlStr成爲創建的div的孩子。實際上，此代碼使得temp.innerHTML == htmlStr == temp.firstChild。這有點多餘。

基本上，你的代碼使下面的HTML：

<div> 
    <div id="test">HELLO</div> 
</div>

來源

2013-01-05 02:49:44

該代碼不會創建一個包裝DIV與createElement，並分配htmlStr作爲其內容。但是，它繼續將該內容從一個小孩一次移出frag，直到div再次爲空。該函數僅返回frag，留下一個空div。它永遠不會被添加到DOM中，並在稍後被垃圾收集。

基本上它是一種讓瀏覽器爲你解析（並可能修復）HTML字符串並將其變爲有效的DOM子樹的方法。

來源

2013-01-05 02:52:53 bfavaretto

createElement（）如何與innerHTML一起使用？

回答

相關問題