如何使用append()重复添加相同节点？寻求更优实现方案

需求：将类名为row的节点作为卡片，添加到container容器中两次。

原始HTML结构 #

<div class="container">
      <div class="row">
          <div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5 class="title">Card title</h5>
            <p class="price">price : 70000</p>
          </div>
      </div>
    </div>

方案1：失败的实现 #

// way1 未能添加两次
let card = document.querySelector('.row').cloneNode(true) //想要添加到container中两次
let container = document.querySelector('.container');

container.append(card)
container.append(card)   

失败原因：DOM节点是唯一的实体，第一次append后，card已经挂载到container中；第二次append只是将这个已存在的节点从当前位置移动到容器末尾，并不会创建新节点，因此最终只会出现一个克隆的卡片。

方案2：可行但不够优雅的实现 #

// way2 可解决但代码不够优雅
 
let card = document.querySelector('.row').cloneNode(true);
let card2 = document.querySelector('.row').cloneNode(true);
let container = document.querySelector('.container');

container.append(card, card2)

该方案通过两次克隆生成独立节点实现需求，但重复的克隆代码冗余，扩展性差（如需添加更多卡片，要重复写克隆语句）。

更优实现方式 #

方式1：循环批量创建克隆节点

通过循环控制克隆次数，代码简洁且扩展性强：

const originalCard = document.querySelector('.row');
const container = document.querySelector('.container');

// 按需修改循环次数即可添加对应数量的卡片
for (let i = 0; i < 2; i++) {
  const cardClone = originalCard.cloneNode(true);
  container.append(cardClone);
}

方式2：利用数组批量生成克隆节点并一次性添加

借助数组生成克隆节点集合，通过展开运算符一次性添加到容器：

const originalCard = document.querySelector('.row');
const container = document.querySelector('.container');

// 创建包含指定数量克隆节点的数组
const cardClones = Array.from({ length: 2 }, () => originalCard.cloneNode(true));
// 展开数组批量添加
container.append(...cardClones);

这两种方式都避免了重复代码，只需修改数字即可调整添加的卡片数量，代码更简洁优雅，可维护性更强。

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