本文讲解如何在不修改 HTML 的前提下，使用原生 JavaScript 正确克隆带有用户实时选择值的 <select> 和 <input> 元素，确保新节点继承当前选中项与输入内容。
本文讲解如何在不修改 html 的前提下，使用原生 javascript 正确克隆带有用户实时选择值的 `
在 DOM 操作中，cloneNode(true) 仅复制元素的结构和初始属性（如 value 属性的初始值），不会自动同步用户交互产生的动态状态（例如 <select> 的当前 selectedIndex 或 <input> 的 value 属性运行时值）。因此，直接克隆会导致新行始终回退到 HTML 中定义的默认值（如 <select> 默认选中第一项，<input> 显示 55 而非用户实际输入的内容）。
要解决此问题，需在克隆后手动同步关键表单控件的当前运行时值。以下是完整、健壮的修复方案：
✅ 正确克隆逻辑（含 input 同步）
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);
// 同步 <select> 的当前选中值
const originalSelect = mynode.querySelector('.options');
const clonedSelect = latest.querySelector('.options');
if (originalSelect && clonedSelect) {
clonedSelect.value = originalSelect.value;
}
// 同步 <input> 的当前输入值（注意：HTML 中写的是 text="number"，应为 type="number"，但不影响 value 读取）
const originalInput = mynode.querySelector('input[type="number"], input:not([type])');
const clonedInput = latest.querySelector('input[type="number"], input:not([type])');
if (originalInput && clonedInput) {
clonedInput.value = originalInput.value;
}
document.querySelector('.container').appendChild(latest);
});⚠️ 关键注意事项
- 拼写修正：addEventListener 不是 addEventListenet（原文本存在拼写错误，已修复）。
- value 属性 vs textContent：对 <select>，应赋值 element.value（而非操作 option.selected），因 value 属性会自动匹配对应 <option>；对 <input>，直接赋 element.value 即可获取/设置用户输入。
- 健壮性增强：添加了 if 判断防止 querySelector 返回 null 时抛错。
- HTML 兼容性：原文本中 <input text="number"> 属于无效属性（应为 type="number"），但 input.value 读取不受影响；若后续需严格校验，建议修正 HTML，但本方案严格遵循“不修改 HTML”的要求。
? 扩展提示（可选优化）
若未来需支持更多表单类型（如复选框、多行文本域），可统一遍历子表单元素：
// 通用同步逻辑（可选）
mynode.querySelectorAll('select, input, textarea').forEach(el => {
const clonedEl = latest.querySelector(`${el.tagName.toLowerCase()}[class="${el.className || ''}"]`);
if (clonedEl) {
clonedEl.value = el.value;
if (el.type === 'checkbox' || el.type === 'radio') {
clonedEl.checked = el.checked;
}
}
});通过以上处理，每次点击“Add Row”按钮时，新克隆的行将精确反映原始行的实时用户状态——包括下拉框选中项和输入框内容，真正实现所见即所得的动态克隆。
