javascript - 我可以克隆、编辑和追加一个 div 吗？

Question

我正在尝试找出是否可以使用 JS 克隆 HTML div，对其进行编辑并将其作为新元素再次附加。所以我的来源是，例如，这段代码:

<div class="wrapper">
    <div class="element">
        <input id="test--1" value="ABC"/>
    </div>
</div>

复制此元素后，我需要找到一种方法来更改新克隆输入的属性 id，清除输入值并将其再次粘贴到包装器中，以便最后看起来像这样:

<div class="wrapper">
    <div class="element">
        <input id="test--1" value="ABC"/>
    </div>
    <div class="element">
        <input id="test--2" value=""/>
    </div>
</div>

这对你来说有意义吗？如果是，我该如何完成？还是将内容分配给变量以附加它更好？我在这里寻找最好的方法，也许我的想法也是一个解决方案。

Answer 1

您可以使用纯 JavaScript 来执行此操作，只需使用 cloneNode() 克隆 .element div。方法，为克隆的 div 分配新的 id 和值，最后使用 insertBefore() 将其追加回文档。像这样的方法:

let x = document.querySelector(".element");

let y = x.cloneNode(true);

y.children[0].id = "test--2";
y.children[0].defaultValue = "";

x.parentNode.insertBefore(y, x.nextSibling);

<div class="wrapper">
    <div class="element">
        <input id="test--1" value="ABC"/>
    </div>
</div>

JSFiddle 上面的代码:https://jsfiddle.net/AndrewL64/jvc7reza/18/