动态克隆元素方法详解
2026-01-25 13:36:44
0浏览
收藏
学习文章要努力，但是不要急！今天的这篇文章《点击按钮动态克隆并插入元素方法》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！
本文详解如何使用 JavaScript 的 `cloneNode()` 方法，在每次点击按钮时精确复制指定 DOM 元素（如带样式的卡片），并将其追加到页面中，同时规避 ID 重复等常见陷阱。
在 Web 开发中，动态克隆 DOM 元素是实现可扩展表单、商品卡片堆叠、多行输入等交互场景的常用技术。针对你的需求——每次点击按钮即复制
并紧邻插入——核心在于：克隆节点 + 修改唯一标识 + 安全插入。
以下是完整、健壮的实现方案（已适配你原始 HTML 结构）：
✅ 正确做法：克隆 + 去重 ID + 追加到父容器
首先，为便于管理，建议将原始卡片包裹在一个容器中（如
），并为按钮添加 id 以避免内联 onclick（更符合现代实践）：
<div id="cards-container">
<div style="width: 18rem;" class="card" id="box">
<div class="card-body">
<h5 class="card-title" id="Cat1">Category 1</h5>
<p class="card-text">No Products Created</p>
<a href="#" class="btn btn-primary">+</a>
</div>
</div>
</div>
<button id="addItemBtn" class="mt-3 btn btn-outline-secondary">Add Another Card</button>然后，在