片段追加后無法克隆？

Question

以下代碼片段是從“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) 使用 fragment 並為其余元素 (test2, test3) 使用 fragment.cloneNode(true)？

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 個解決方案

解決方案1
1 2018-09-15 15:09:31

解決方案2
0 2018-09-15 15:15:11

片段追加后無法克隆？

問題描述

2 個解決方案

解決方案1 1 2018-09-15 15:09:31

解決方案2 0 2018-09-15 15:15:11

解決方案1
1 2018-09-15 15:09:31

解決方案2
0 2018-09-15 15:15:11