如何批量克隆带ID的li元素并修改ID与文本内容？

问题 #

现有如下DOM结构：

<ul id="holder">
<li>
 <label class="toggle-button">
  <input type="checkbox" id="1" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY1 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>
</ul>

需要实现：

• 克隆该li元素，生成总共4个相同结构的li挂载到#holder下
• 修改每个li内部的内容：
  • 把input的id依次改为1、2、3、4
  • 把p标签的文本从MY1改为MY: X（X对应序号1-4）

最终目标DOM结构如下：

<ul id="holder">

<li>
 <label class="toggle-button">
  <input type="checkbox" id="1" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY: 1 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>

<li>
 <label class="toggle-button">
  <input type="checkbox" id="2" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY: 2 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>


<li>
 <label class="toggle-button">
  <input type="checkbox" id="3" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY: 3 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>

<li>
 <label class="toggle-button">
  <input type="checkbox" id="4" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY: 4 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>


</ul>

解决方案 #

用原生JavaScript即可实现，步骤如下：

1. 获取父容器和原始li元素
2. 先修改原始li的文本内容，匹配目标格式
3. 循环克隆剩余元素，每次克隆后修改对应id和文本，再添加到父容器

代码示例：

// 获取父容器与原始li元素
const holder = document.getElementById('holder');
const originalLi = holder.querySelector('li');

// 先修改原始li的文本
const originalP = originalLi.querySelector('.neon');
originalP.textContent = 'MY: 1 ';

// 克隆生成剩下3个元素（总共4个，循环3次）
for (let i = 2; i <= 4; i++) {
  // 深克隆li及内部所有子元素
  const clonedLi = originalLi.cloneNode(true);
  
  // 修改克隆元素的input id
  const clonedInput = clonedLi.querySelector('input');
  clonedInput.id = i;
  
  // 修改克隆元素的p标签文本
  const clonedP = clonedLi.querySelector('.neon');
  clonedP.textContent = `MY: ${i} `;
  
  // 将克隆元素添加到父容器
  holder.appendChild(clonedLi);
}

说明 #

• 使用cloneNode(true)进行深克隆，确保复制li内部所有子元素和内联事件
• 循环从2开始，因为原始元素已经是第1个，只需补充剩余3个
• 直接操作克隆后的子节点，减少重复DOM查询，提升效率

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