使用JavaScript复制HTML元素：点击按钮无响应的问题排查

你的代码问题出在JavaScript的克隆逻辑上，我来拆解两个关键问题：

1. cloneNode()默认是浅克隆，未复制子元素 #

你当前使用的newDiv.cloneNode()，这个方法默认参数为false——只会克隆元素本身，不会复制它内部的所有子节点（比如表单里的label、input等组件）。所以你克隆出来的是空的.quote-item容器，就算添加到页面也看不到内容，看起来就像点击按钮没反应。

2. 模板引用会随新增元素动态变化 #

你把newDiv赋值为quoteInfo.lastElementChild，第一次点击后这个引用会变成刚添加的新元素。虽然修复深克隆后第一次点击能生效，但后续再点击时，其实是克隆刚新增的元素，逻辑上不够稳妥，更可靠的方式是一开始就获取原始的模板元素。

修复后的JavaScript代码 #

// 提前获取原始的quote-item模板，固定模板来源
var quoteInfo = document.querySelector('div.quote-info')
var itemTemplate = quoteInfo.querySelector('.quote-item')
var addButton = document.querySelector('.add-item')

addButton.addEventListener('click', () => {
  // 传入true执行深克隆，复制所有子元素及内容
  var newItem = itemTemplate.cloneNode(true)
  
  // 可选优化1：重置新元素的输入框值，避免继承模板内容
  newItem.querySelectorAll('input').forEach(input => {
    input.value = ''
  })
  
  // 可选优化2：更新输入框id和label的for属性，避免页面出现重复id
  const itemCount = quoteInfo.querySelectorAll('.quote-item').length + 1
  newItem.querySelectorAll('[id]').forEach(element => {
    const oldId = element.id
    element.id = oldId.replace(/\d+$/, itemCount)
    const correspondingLabel = newItem.querySelector(`label[for="${oldId}"]`)
    if (correspondingLabel) {
      correspondingLabel.setAttribute('for', element.id)
    }
  })
  
  quoteInfo.appendChild(newItem)
})

额外说明 #

• 深克隆：cloneNode(true)会完整复制目标元素的所有子节点和属性，确保新增的item和原始模板结构完全一致
• 重置输入框：避免克隆出来的item带着模板里的输入值，提升用户体验
• 更新id：重复id不符合HTML规范，可能导致label关联失效、JS选择器出错等问题，更新后更健壮

这样修改后，点击按钮就能正常新增完整的.quote-item元素了！

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