本文讲解如何通过 insertAdjacentHTML() 方法实现每次点击按钮都在页面中追加一个新文本框，避免因重复赋值 innerHTML 导致已有元素被清空的问题。
本文讲解如何通过 insertadjacenthtml() 方法实现每次点击按钮都在页面中追加一个新文本框，避免因重复赋值 innerhtml 导致已有元素被清空的问题。
在 Web 开发中，动态创建并插入表单元素（如 <input type="text">）是常见需求。但初学者常误用 element.innerHTML = html 的方式反复赋值，这会导致容器内所有已有内容被完全替换，而非追加——因此多次点击按钮后，始终只显示最后一个文本框。
正确做法是使用原生 DOM 方法 insertAdjacentHTML()，它支持在指定位置安全插入 HTML 字符串，且不会影响已有子节点。其第一个参数为插入位置（如 'beforeend' 表示插入到容器末尾），第二个参数为待插入的 HTML 字符串：
<button id="addBtn" onclick="addTextbox()">添加文本框</button> <div id="container"></div>
function addTextbox() {
// 为避免 ID 冲突，使用时间戳或计数器生成唯一 ID
const uniqueId = 'textbox_' + Date.now();
const html = `<input type="text" id="${uniqueId}" placeholder="文本框 ${new Date().getTime()}">`;
document.getElementById('container').insertAdjacentHTML('beforeend', html);
}✅ 关键优势：
-
insertAdjacentHTML('beforeend', html)等价于appendChild()对应的 HTML 片段插入，性能好、语义清晰； - 不会触发重新解析整个容器 DOM，保留已绑定事件、焦点状态等；
- 避免
innerHTML += ...引发的隐式重渲染与事件丢失风险。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 切勿复用相同
id（如原文中多次生成id="a"），否则违反 HTML 唯一性规范，可能导致 JS 获取错误元素或样式异常；建议使用动态 ID（如textbox_1698765432100）或改用class； - 若需后续操作新增文本框（如读取值、绑定事件），推荐结合
document.createElement()+appendChild()实现更可控的 DOM 操作； - 在现代项目中，也可考虑使用
template标签或框架（如 React/Vue）管理动态列表，提升可维护性。
总结：用 insertAdjacentHTML('beforeend', ...) 替代 innerHTML = ... 是实现“点击即追加”的简洁可靠方案，兼顾兼容性、性能与可维护性。
