个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 20:11:37 26 4
gpt4 key购买 nike

以下代码片段是从“Javascript Ninja 的 secret ”的 list 12.4 中简化而来的，用于向多个现有元素中注入(inject)一个新元素。

<!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);

无法正常工作，因为仅注入(inject)了“test1”元素。所以我将其更改为:

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

这会向所有元素(test1、test2 和 test3)注入(inject)新元素。如何按照作者的意图对第一个元素(test1)使用 fragment，对其余元素(test2、test3)使用 fragment.cloneNode(true)？

最佳答案

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

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

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>

关于javascript - 附加后无法克隆片段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52345941/

26 4 0
文章推荐： c# - 在 C# 中使用 Regex 提取 Form 标记中的操作属性？
文章推荐： c - 程序不返回扫描字符
文章推荐： c# - IQueryable 和 Queryable 之间的区别
文章推荐： javascript - 单击时克隆的元素无法使用 Javascript [使用 Vanilla Js no JQuery]
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com