Question

我有以下代码，它几乎创建了一个div元素以及内部的任何内容并将其放入

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]);

然而，我很困惑为什么要创造另一个 div temp = document.createElement('div'); 如果我们已经将<div id="test">HELLO</div>传递给create()函数。在我看来会在div中创建一个div（但它没有）。或者只是通过temp.firtChild提取？
temp.innerHTML = htmlStr; temp之后div做了什么？

Answer 1

要回答你的第一个问题，它基本上会创建一个包含htmlStr的父div，恰好是<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>

Answer 2

该代码确实使用createElement创建包装div，并将htmlStr指定为其内容。但随后它继续将内容从该div中移出，一次移动一个孩子，进入frag，直到div再次为空。该函数只返回frag，后面留下一个空div。它从未添加到DOM中，稍后会被垃圾收集。

基本上，这是让浏览器为您解析（并可能修复）HTML字符串的方法，并使其成为有效的DOM子树。

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

2 个答案: