我制作了克隆函数和文本计数器，它应该在我克隆的每个新框中包含一个新数字，下面的代码克隆了该元素，但新元素始终引用第一个源中的数字以及计数器始终在第一个框中写入新数字，第一个框中始终写入从 1 到最新计数器编号的数字。是否可以仅使用 javascript 来完成？我真的很感谢你的帮助。
var container = document.querySelector(".container");
var deleteBtn = document.querySelector(".delete");
var box = document.querySelector(".box");
var counter = 0;
container.addEventListener('click', function({target}) {
if (target.nodeName = 'BUTTON' && target.classList.contains('cloneBtn')) {
counter ++;
var text = document.createTextNode(counter);
box.appendChild(text);
const clone = target.parentNode.cloneNode(true);
container.appendChild(clone);
}
if(target.nodeName = 'BUTTON' && target.classList.contains('deleteBtn')) {
target.parentNode.remove(target)
}
}).container {
border: 1px solid black;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.box {
width: 100px;
height: 100px;
background: red;
margin: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<div class="box">
<button class="cloneBtn">Clone</button>
<button class="deleteBtn">Delete</button>
</div>
</div>
</body>
</html>最佳答案
如果我理解正确，问题是您始终将计数器值附加到初始 .box 元素，您希望将其附加到克隆元素，因此您将看到新的克隆元素中的计数器值:
var container = document.querySelector(".container");
var deleteBtn = document.querySelector(".delete");
var box = document.querySelector(".box");
var counter = 0;
container.addEventListener('click', function({target}) {
if (target.nodeName = 'BUTTON' && target.classList.contains('cloneBtn')) {
counter++;
var text = document.createTextNode(counter);
// box.appendChild(text); <---- WRONG
const clone = box.cloneNode(true); // <-- Here clone the initial box instead target to avoid stacking of text nodes
clone.appendChild(text);
//^^^^^^^^^^^^^^^^^ here append to the cloned element
container.appendChild(clone);
}
if(target.nodeName = 'BUTTON' && target.classList.contains('deleteBtn')) {
target.parentNode.remove(target)
}
}).container {
border: 1px solid black;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.box {
width: 100px;
height: 100px;
background: red;
margin: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<div class="box">
<button class="cloneBtn">Clone</button>
<button class="deleteBtn">Delete</button>
</div>
</div>
</body>
</html>关于javascript - 如何在 javascript 中克隆元素并附加唯一的新子节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49533325/