Javascript createElement（）如何处理innerHTML？

我有下面的代码，它几乎创建了一个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]);

函数创建（htmlStr）{
var frag=document.createDocumentFragment（），temp=document.createElement（'div'）；
temp.innerHTML=htmlStr；
while（临时第一个孩子）{
第二个子女（临时第一个子女）；
}
返回碎片；
}
var fragment=create（'HELLO'）；
document.body.insertBefore（fragment，document.body.childNodes[0]）；

然而，我很困惑，为什么我们要创造另一个呢

div

temp=document.createElement（'div'）
如果我们已经将
HELLO
传递给
create（）
函数。在我看来，这会在一个div中创建一个div（但事实并非如此）。还是只需使用
temp.firtChild
提取

什么是

temp.innerHTML=htmlStr因为
temp
是
div
吗

---

为了回答第一个问题，它基本上创建了一个父div来包含

htmlStr

，它恰好是

HELLO

。因此，基本上，这行代码本身只生成一个div，但这个

temp

div随后被用作子级来包含

htmlStr

。但你是对的；

temp

div稍后简单提取；这几乎没用。如果没有其他代码要考虑，我不知道为什么会这样。

至于问题2，它所做的只是使

htmlStr

成为所创建div的子级。实际上，此代码使

temp.innerHTML==htmlStr==temp.firstChild

。这有点多余

基本上，您的代码生成以下HTML：

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

你好

该代码确实使用

createElement

创建了一个包装div，并将

htmlStr

指定为其内容。但随后它继续将内容移出该div，一次一个子项，移动到

frag

，直到该div再次为空。函数只返回

frag

，留下一个空div。它从未添加到DOM中，稍后将被垃圾收集

---

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

您的

而
看起来似乎永无止境。@techfoobar-调用
appendChild（）
时，作为
temp
子元素的元素将从
temp
中删除，并成为
frag
@gilly3-Ah的子元素。。好啊不知什么原因，我想起了那件事。谢谢