JavaScript重建HTML元素时第三次点击新增2个元素的问题求解

问题原因 #

• 你错误将克隆得到的.option-text元素插入到了原有第一个.option-text的内部，而非同级位置，造成DOM嵌套异常。
• 你全局声明的option变量指向页面真实DOM节点的引用，往该节点插入内容后，节点本身结构已经改变，后续克隆会把之前插入的子元素一并复制，最终出现点击新增元素数量递增的问题。

修复代码 #

HTML代码无需调整，仅修改JS部分即可：

// 页面加载时提前保存一份干净的初始选项结构作为静态模板
const optionTemplate = document.querySelector(".option-text").cloneNode(true);
const addOptionBtn = document.querySelector(".add-option");
const firstOption = document.querySelector(".option-text");

function duplicateOption() {
  // 每次克隆都使用不变的静态模板，保证新增的结构统一
  return optionTemplate.cloneNode(true);
}

addOptionBtn.addEventListener('click', function() {
  // 将新生成的选项插入到原有第一个选项的同级后方，避免嵌套
  firstOption.after(duplicateOption());
})

改动说明 #

• 初始化阶段就把原始的选项结构克隆为静态模板，后续所有克隆操作都基于该模板执行，不会受页面DOM变动的影响，每次克隆得到的都是仅包含单个输入框的结构。
• 替换原有插入逻辑，使用after方法将新元素插入到原有选项的同级位置，不会出现嵌套问题，每次点击仅新增1个选项。

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