如何静态克隆元素并重置初始状态、更新id属性？

问题说明 #

点击"copy checkboxes"按钮克隆row0容器时，当前实现会复制复选框的实时checked状态（比如用户勾选后克隆的新复选框也是勾选状态），且需要手动修改每个复选框的id属性。需求是克隆出保留元素初始状态（页面加载时的状态）的副本，并自动更新新元素的id。

解决思路 #

1. 保存初始HTML结构：页面加载完成后，立即存储row0的原始HTML字符串，这部分内容包含元素的初始状态（复选框未勾选）。
2. 基于初始HTML创建副本：克隆时不再直接用cloneNode，而是通过初始HTML创建新元素，确保副本是初始状态。
3. 批量更新ID属性：遍历新元素内所有带id的子元素，按规则修改id（比如给原id添加递增后缀，或替换编号），避免重复id问题。

修改后的代码示例 #

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>static copy test</title>
    <script type="module">
    class CopyClass {
      row0 = document.querySelector('#row0');
      originalRowHTML = '';
      copyCount = 1; // 用于生成新的id编号

      copyRow = () => {
        // 基于初始HTML创建新的row元素
        const newRow = document.createElement('div');
        newRow.innerHTML = this.originalRowHTML;
        
        // 更新row自身的id
        newRow.id = `row${this.copyCount}`;
        
        // 遍历所有带id的子元素，更新id
        const elementsWithId = newRow.querySelectorAll('[id]');
        elementsWithId.forEach(el => {
          // 替换原id中的数字部分为新编号，比如cb0 → cb2，cb1→cb3
          el.id = el.id.replace(/\d+$/, match => Number(match) + this.copyCount * 2);
        });
        
        // 将新row插入到原row后面
        this.row0.insertAdjacentElement('afterend', newRow);
        this.copyCount++;
      };

      constructor() {
        // 页面加载时保存row0的初始HTML
        this.originalRowHTML = this.row0.outerHTML;
        document.getElementById('copy').addEventListener('click', this.copyRow);
      }
    }
    new CopyClass();
    </script>
  </head>

  <body>
    <label>check a checkbox and then click button to statically copy</label>

    <button type="button" id="copy">copy checkboxes</button>

    <div id="row0">
      <div id="col0">
        <input type="checkbox" id="cb0" />
      </div>
      <div id="col1">
        <input type="checkbox" id="cb1" />
      </div>
    </div>
  </body>
</html>

关键细节解释 #

• 保存初始HTML：在构造函数中用outerHTML获取row0的完整初始结构，这部分内容不会受后续用户操作（比如勾选复选框）影响。
• 生成新ID的逻辑：通过copyCount记录复制次数，每次复制时将原id中的数字部分加上copyCount*2，确保新id唯一且有规律（第一次复制得到cb2、cb3，第二次得到cb4、cb5等）。
• 避免实时状态复制：用innerHTML创建的新元素是基于初始HTML渲染的，因此复选框会保持页面加载时的未勾选状态，不会继承原元素的实时状态。

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