Question

以下代码段是从“ Javascript忍者的秘密”清单12.4中简化而成的，以便向多个现有元素注入新元素。

<!DOCTYPE html>
<html>
    <body>
        <div id="test1">Test 1</div>
        <div id="test2">Test 2</div>
        <div id="test3">Test 3</div>

        <script>
            const divs = document.querySelectorAll("div");
            const fragment = document.createDocumentFragment();
            const div = document.createElement("div");
            div.innerHTML = "<b>Element Injected</b>";
            fragment.appendChild(div.firstChild);
            for (let i = 0; divs[i]; i++) {
                divs[i].appendChild(i > 0 ? fragment.cloneNode(true) : fragment);
            }
        </script>
    </body>
</html>

似乎这行：

divs[i].appendChild(i > 0 ? fragment.cloneNode(true) : fragment);

不能正常工作，因为仅注入了“ test1”元素。所以我将其更改为：

divs[i].appendChild(fragment.cloneNode(true));

这会将新元素注入所有元素（test1，test2和test3）。如何按照作者的意图将片段用于第一个元素（test1），并将fragment.cloneNode（true）用于其余元素（test2，test3）？

Answer 1

将片段附加到某个位置时，其所有内容都会传递到该位置，并且片段变为空。如果要多次添加其内容，则必须每次都克隆它。

下面是显示行为的示例：

const divs = document.querySelectorAll("div");
const fragment = document.createDocumentFragment();
const div = document.createElement("div");
div.innerHTML = "<b>Element Injected</b>";
fragment.appendChild(div.firstChild);

console.log(`fragment before appending has ${fragment.childNodes.length} children`);
divs[0].appendChild(fragment);
console.log(`fragment after appending has ${fragment.childNodes.length} children`);

<div id="test1">Test 1</div>
<div id="test2">Test 2</div>
<div id="test3">Test 3</div>

Answer 2

当marzelin所说的片段在您附加到某处时变成空白时，您可以用相同的方法进行操作。

const divs = document.querySelectorAll("div");
const fragment = document.createDocumentFragment();
const div = document.createElement("div");
div.innerHTML = "<b>Element Injected</b>";
fragment.appendChild(div.firstChild);
var t1 = fragment.cloneNode(true);
for (let i = 0; divs[i]; i++) {
    t2 = t1;
    divs[i].appendChild(i > 0 ? t2.cloneNode(true) : fragment);
}

<div id="test1">Test 1</div>
        <div id="test2">Test 2</div>
        <div id="test3">Test 3</div>

片段添加后无法克隆？

2 个答案: