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一起使用？

回答

相关问题