1

我有以下代码几乎可以创建一个 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;since tempis a 是什么意思div？

4

2 回答 2

0

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

至于问题 2，它所做的只是让htmlStr创建的 div 成为一个孩子。实际上，此代码使temp.innerHTML == htmlStr == temp.firstChild. 这有点多余。

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

<div>
    <div id="test">HELLO</div>
</div>
于 2013-01-05T02:49:44.433 回答
0

该代码确实创建了一个带有 的包装 div createElement，并将 分配htmlStr为它的内容。但随后它继续将内容从该 div 中移出，一次一个孩子，移入frag，直到 div 再次为空。该函数返回 just frag，留下一个空的 div。它从未添加到 DOM 中，稍后将被垃圾收集。

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

于 2013-01-05T02:52:53.323 回答