时间戳

首页 > 解决方案 > 如何在不弄乱唯一 ID 的情况下克隆输入字段？

javascript - 如何在不弄乱唯一 ID 的情况下克隆输入字段？

问题描述

我有一个输入表单，附有一个更改其子属性的元素。碰巧我需要这个元素与它的输入表单一起被复制/克隆。我正在使用复制此元素element.cloneNode(true)

这不起作用，因为输入是具有唯一 ID 的单选按钮等。有没有办法让标签和输入字段在能够克隆它们的同时完全正常工作？使用 vanilla javascript 将是最佳选择，但任何建议都会有所帮助，谢谢。

标签： javascripthtmlcss

解决方案

您可以在每个标签/ID 上添加一个增量编号。

这是一个例子：

const container = document.querySelector('.clone-container')
container.querySelectorAll('.clone-me').forEach((item, index) => {
  // Clone it
  let cloned = item.cloneNode(true)
  
  // Add an increment number to label and input (so it's unique)
  cloned.querySelector('label').setAttribute('for', `anything${index}`)
  cloned.querySelector('input').setAttribute('id', `anything${index}`)
  
  // Append
  container.append(cloned)
})
<div class="clone-container">
  <div class="clone-me">
    <label for="option1">Option 1</label>
    <input type="radio" id="option1" name="options">
  </div>
  <div class="clone-me">
    <label for="option2">Option 2</label>
    <input type="radio" id="option2" name="options">
  </div>
</div>

推荐阅读