单击克隆不会产生新的 DOM 元素

Question

我有这个简单的 JS 脚本，我需要实现的是：每次单击按钮时，都会将卡片的克隆附加到容器中。

const card = document.querySelector('.card').cloneNode(true)
const button = document.querySelector('.btn')
const container = document.querySelector('.container')

button.addEventListener('click', () => {
    container.append(card)
})

<div class="container">
  <button class="btn">this is a button</button>
  <div class="card">
    <h1>This is a card</h1>
  </div>
</div>

没什么难的。我第一次点击按钮一切正常。为什么下次按钮不附加新的克隆？

Answer 1

在点击发生之前，您只制作了一个克隆。您应该在每次单击时创建一个新克隆。

因此将分配移动到点击处理程序内的 card：

const button = document.querySelector('.btn');
const container = document.querySelector('.container');

button.addEventListener('click', () => {
    const card = document.querySelector('.card').cloneNode(true);
    container.append(card);
});

无关，但请用;结束你的陈述。您不想依赖 automatic semicolon insertion 机制，它有时会产生令人惊讶的效果。

Answer 2

您正在一遍又一遍地重新插入同一个克隆。每次单击按钮时都需要创建一个新的克隆。

.container {
  background: #ddd;
  padding: 1em;
}
.card {
  display: inline-block;
  width: 5em;
  height: 10em;
  font-size: 10px;
  border: 2px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <button class="btn">this is a button</button>
        <div class="card">
            <h1>This is a card</h1>
        </div>
    </div>

</body>
<script>
    const button = document.querySelector('.btn')
    const container = document.querySelector('.container')

    button.addEventListener('click', () => {
        const card = document.querySelector('.card').cloneNode(true)
        container.append(card);
    })

</script>
</html>

单击克隆不会产生新的 DOM 元素

Clone on click does not produce new DOM element

html

javascript

clone