javascript - createElement() 如何与innerHTML 一起使用？

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

1. 但是，我很困惑为什么我们要创建另一个 div temp = document.createElement('div');如果我们已经通过 <div id="test">HELLO</div>至create()功能。在我看来，这会在一个 div 中创建一个 div (但事实并非如此)。或者只是用 temp.firtChild 提取出来？

2. temp.innerHTML = htmlStr; 是什么意思？从 temp 开始执行是 div ？

Answer 1

为了回答你的第一个问题，它基本上创建了一个父 div 来包含 htmlStr ，恰好是 <div id="test">HELLO</div> 。所以基本上，这行代码本身只是生成一个 div，但是这个 temp然后使用 div 来包含 htmlStr作为一个 child 。但你是对的； temp div 稍后简单提取；这几乎没什么用。如果没有其他代码需要考虑，我不知道为什么会出现这样的情况。

对于问题 2，它所做的只是生成 htmlStr创建的 div 的子级。实际上，这段代码使得 temp.innerHTML == htmlStr == temp.firstChild 。这有点多余。

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

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