本文介绍如何在不修改html结构的前提下，通过原生javascript精准克隆包含动态用户选择（如下拉框选中值、输入框内容）的表单节点，并确保新克隆节点继承当前最新交互状态。
本文介绍如何在不修改html结构的前提下，通过原生javascript精准克隆包含动态用户选择（如下拉框选中值、输入框内容）的表单节点，并确保新克隆节点继承当前最新交互状态。
在表单动态增行场景中，仅调用 cloneNode(true) 是不够的——它仅复制 DOM 结构和初始属性（如
因此，正确的做法是：克隆节点后，显式读取原节点的运行时状态（.value、.checked 等），再赋值给克隆节点对应元素。
以下是完整、可直接使用的原生 JavaScript 解决方案（仅修改 JS，兼容所有现代浏览器）：
const btn = document.getElementById("myBtn");
btn.addEventListener('click', function() {
const container = document.querySelectorAll(".mynode");
const mynode = container[container.length - 1];
const latest = mynode.cloneNode(true);
// 同步下拉框的当前选中值
const originalSelect = mynode.querySelector('.options');
const clonedSelect = latest.querySelector('.options');
if (originalSelect && clonedSelect) {
clonedSelect.value = originalSelect.value;
}
// 同步文本输入框的当前值（包括用户修改后的数字）
const originalInput = mynode.querySelector('input[type="number"]');
const clonedInput = latest.querySelector('input[type="number"]');
if (originalInput && clonedInput) {
clonedInput.value = originalInput.value;
}
document.querySelector('.container').appendChild(latest);
});
✅ 关键说明：
- 修复了原代码中的拼写错误：addEventListenet → addEventListener；
- 使用 querySelector 精准定位 .options 下拉框和 input[type="number"] 输入框，避免依赖固定索引或结构假设；
- 对 value 属性的赋值操作会自动触发浏览器更新 UI（如高亮对应
- 添加了空值判断（if (originalSelect && clonedSelect)），增强健壮性，防止 DOM 查询失败导致脚本中断。
⚠️ 注意事项：
- 若后续扩展支持复选框（）或多选下拉（
- cloneNode(true) 不会复制事件监听器，因此新克隆行中的按钮或交互元素如需独立行为，需另行绑定（本例无此需求）；
- 所有状态同步必须在 appendChild 之前完成，否则新节点尚未挂载，部分浏览器可能限制某些属性写入。
该方案简洁、可靠，完全满足“仅改 JS、不依赖库、保留用户实时输入”的核心要求。
