js复制多个相同的盒子

在JavaScript中复制多个相同的盒子，通常涉及到DOM操作和元素的克隆。以下是一个基础的概念解释和相关示例代码，展示如何实现这一功能。

基础概念

DOM（文档对象模型）：DOM是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
元素克隆：在DOM中，可以使用cloneNode()方法来复制一个节点及其子节点。这个方法接受一个布尔参数，指示是否深拷贝（即复制节点及其整个子树）。

类型

浅拷贝：只复制节点本身，不复制其子节点。
深拷贝：复制节点及其所有子节点。

应用场景

动态生成列表项：如新闻列表、商品列表等。
表单元素的批量添加：如添加多个相同的输入框或选择框。

示例代码

假设我们有一个简单的HTML结构，想要复制一个包含多个子元素的盒子多次：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clone Boxes</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}
</style>
</head>
<body>

<div id="originalBox" class="box">
  <p>Original Box</p>
</div>

<button onclick="cloneBoxes()">Clone Boxes</button>

<script>
function cloneBoxes() {
  const originalBox = document.getElementById('originalBox');
  const numberOfClones = 5; // 指定要复制的盒子数量

  for (let i = 0; i < numberOfClones; i++) {
    const clone = originalBox.cloneNode(true); // 深拷贝
    clone.id = ''; // 清除克隆元素的ID以避免重复
    document.body.appendChild(clone);
  }
}
</script>

</body>
</html>