如何使用 JavaScript 动态添加 HTML 元素

本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，涵盖 innerHTML 的正确用法、事件委托实践、DOM 插入时机控制及常见陷阱规避。

本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，涵盖 `innerHTML` 的正确用法、事件委托实践、DOM 插入时机控制及常见陷阱规避。

在 Web 开发里，动态插入 HTML 元素几乎是绕不开的需求。比如，用户一勾选复选框，就要立刻渲染对应的筛选标签（chip）；再比如生成搜索建议列表，或者按页继续加载内容，场景都很常见。可一旦直接用字符串拼接再配合 innerHTML +=，问题往往也跟着来了：内容重复插入、ID 发生冲突、事件绑定失效、XSS 风险上升，甚至像这个例子里一样，还会因为闭包和 this 绑定处理不当，导致 customid 的逻辑出现偏差。

✅ 推荐方案：事件委托 + document.createElement() 或安全字符串插入

以下为优化后的完整实践方案（已验证可运行）：

✅ 正确做法：使用事件委托 + 唯一容器 ID

 Filter 1
 Filter 2
 Filter 3

const container = document.getElementById('ChoosenFiltercontainer');
const filterGroup = document.querySelector('.FilterDropdowns');

// 1️⃣ 监听复选框点击（委托至父容器）
filterGroup.addEventListener('click', (e) => {
const chk = e.target;
if (!chk.matches('input[type="checkbox"]')) return;

const id = chk.id;
const containerId = `${id}_chip`; // 保证唯一性，避免 ID 冲突
let chipWrapper = document.getElementById(containerId);

// 若尚不存在，动态创建并插入
if (!chipWrapper) {
chipWrapper = document.createElement('div');
chipWrapper.id = containerId;
chipWrapper.className = 'col-md-auto filter';
chipWrapper.style.display = 'none';

const chip = document.createElement('div');
chip.className = 'chip chip-outline btn-outline-dark rounded-pill';
chip.setAttribute('data-mdb-ripple-color', 'dark');
chip.innerHTML = `${id} `;

chipWrapper.appendChild(chip);
container.appendChild(chipWrapper);
}

// 控制显隐
chipWrapper.style.display = chk.checked ? 'block' : 'none';
});

// 2️⃣ 处理 chip 关闭按钮（委托至 container）
container.addEventListener('click', (e) => {
const closeBtn = e.target;
if (!closeBtn.matches('i.close')) return;

const filterId = closeBtn.dataset.id;
const checkbox = document.getElementById(filterId);
if (checkbox) {
checkbox.checked = false;
closeBtn.closest('div.filter').style.display = 'none';
}
});

⚠️ 关键注意事项

• 不要滥用 innerHTML +=：它会重新解析整个 HTML 字符串，导致已绑定事件丢失、表单状态重置、性能下降；应优先使用 appendChild() 或 insertAdjacentHTML()（更可控）。
• ID 必须唯一：原代码中 customid 拼接方式易重复（如 filter10 和 filter10），改用 id + '_chip' 更可靠。
• 避免 bind(this, customid) 闭包陷阱：循环中 i 和 customid 在异步回调中会滞后，委托模式天然规避此问题。
• 防御性 DOM 查询：每次操作前检查元素是否存在（getElementById 返回 null 时需创建）。
• XSS 防护：若 id 或文本来自用户输入，请务必使用 textContent 替代 innerHTML 插入不可信内容；本例中 id 为开发可控值，故可安全使用。

? 替代方案：insertAdjacentHTML()（简洁且高效）

若偏好字符串模板，可用更安全的插入方法：

// 替代 innerHTML += 的写法（推荐）
container.insertAdjacentHTML('beforeend', `


${id} 


`);

✅ insertAdjacentHTML() 不会破坏现有子节点事件监听器，且明确指定插入位置（'beforeend' 等同于 appendChild）。

掌握这些模式后，你不仅能解决“复选框生成 chip”这一具体问题，更能构建可维护、健壮的动态 UI 逻辑。记住：委托优于遍历监听，createElement 优于字符串拼接，防御性编程优于假设 DOM 存在。