Javascript 附加后无法克隆片段？_Javascript

Javascript 附加后无法克隆片段？

javascript

Javascript 附加后无法克隆片段？,javascript,Javascript,下面的代码snipset是从“Javascript忍者的秘密”的清单12.4中简化出来的，它将一个新元素注入到多个现有元素中 <!DOCTYPE html> <html> <body> <div id="test1">Test 1</div> <div id="test2">Test 2</div> <div id="test3">Test 3&

下面的代码snipset是从“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>

无法正常工作，因为只注入了“test1”元素。所以我把它改成：

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

这将向所有元素（test1、test2和test3）注入新元素。

如何使用fragment作为第一个元素（test1），使用fragment.cloneNode（true）作为其余元素（test2，test3），正如作者所希望的那样？

当您将fragment附加到某个地方时，它的所有内容都会传递到该位置，并且fragment变为空。如果要多次添加其内容，则每次都必须对其进行克隆

下面是一个显示行为的示例：

const divs=document.queryselectoral（“div”）；
const fragment=document.createDocumentFragment（）；
const div=document.createElement（“div”）；
div.innerHTML=“元素注入”；
片段.appendChild（div.firstChild）；
log（`fragment before appending has${fragment.childNodes.length}childrends`）；
divs[0]。追加子项（片段）；
log（`fragment after appending has${fragment.childNodes.length}childrends`）
测试1
测试2
测试3
正如marzelin所说，当您在某处追加时，片段将变为空白，您可以通过这种方式执行相同的过程

const divs=document.queryselectoral（“div”）；
const fragment=document.createDocumentFragment（）；
const div=document.createElement（“div”）；
div.innerHTML=“元素注入”；
片段.appendChild（div.firstChild）；
var t1=片段克隆节点（true）；
for（设i=0；divs[i]；i++）{
t2=t1；
divs[i].appendChild（i>0？t2.cloneNode（true）：片段）；
}
测试1
测试2
测试3
divs[i].appendChild(fragment.cloneNode(true));