如何实现点击按钮时克隆id为box的div元素并添加到其旁

需求 #

点击按钮时，复制ID为box的div元素，并将其添加到原元素的相邻位置，每次点击都执行该操作。

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>

<div style="width: 18rem;" class="card" id="box">
    <div class="card-body">
        <h5 class="card-title" id="Cat1"></h5>
        <p class="card-text">No Products Created</p>
        <a href="#" class="btn btn-primary">+</a>
    </div>
</div>

<button onclick="addItem()">Click Me!</button>
  
<script>
    let cloneCounter = 1;
    function addItem() {
        // 获取目标元素
        const original = document.getElementById('box');
        // 深复制元素（包含所有子元素）
        const clone = original.cloneNode(true);
        
        // 更新复制元素的ID，避免重复
        cloneCounter++;
        clone.id = `box-${cloneCounter}`;
        // 更新内部标题的ID
        const cloneTitle = clone.querySelector('.card-title');
        cloneTitle.id = `Cat${cloneCounter}`;
        
        // 将复制元素插入到原元素的紧邻后方
        original.insertAdjacentElement('afterend', clone);
    }
</script>
 
</body>
</html>

关键说明 #

• 深复制元素：使用cloneNode(true)而非cloneNode(false)，这样能完整复制原元素的所有子节点和内容，确保复制后的卡片和原卡片结构一致。
• 避免ID冲突：HTML中ID必须唯一，所以给复制后的元素及其内部标题设置递增的ID，防止出现重复ID导致的问题。
• 插入位置：insertAdjacentElement('afterend', clone)方法直接将复制元素放在原元素的相邻后方，满足需求中的“添加到原元素的相邻位置”要求。

内容的提问来源于stack exchange，提问作者Kartikeya Chauhan