时间戳

首页 > 解决方案 > 附加后无法克隆片段？

javascript - 附加后无法克隆片段？

问题描述

以下代码片段是从“Javascript Ninja 的秘密”的清单 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）和片段.cloneNode（true）用于其余元素（test2，test3）？

标签： javascript

解决方案

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

这是一个显示行为的示例：

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>

推荐阅读