javascript如何创建和操作HTML元素？【教程】

document.createElement()是最基本可控的HTML元素创建方式，返回未挂载节点，需手动设置属性、内容、事件后用appendChild等挂载；常见错误包括未挂载、误传字符串；innerHTML和insertAdjacentHTML适合批量插入但需防XSS；textContent用于安全显示纯文本；事件应优先委托给父容器。

用 document.createElement() 创建元素最直接

这是创建 HTML 元素最基本、最可控的方式，适用于所有现代浏览器。它返回一个未挂载的节点，后续可自由设置属性、内容、事件，再插入 DOM。

常见错误是创建后没加进文档树，导致页面无变化：

• 只调用 document.createElement('div') 不会自动显示
• 忘记用 appendChild()、insertBefore() 或 replaceChild() 挂载到真实节点上
• 误把字符串当节点传入（如 parent.appendChild('
  ')），会报错或转为文本

示例：创建带 class 和文本的按钮

const btn = document.createElement('button');
btn.className = 'primary-btn';
btn.textContent = '提交';
document.body.appendChild(btn);

innerHTML 和 insertAdjacentHTML() 适合批量插入 HTML 字符串

innerHTML 简单但有风险：会清空原有子节点，且若拼接用户输入可能引发 XSS。仅推荐用于完全可控的静态结构。

立即学习“Java免费学习笔记（深入）”；

insertAdjacentHTML() 更安全灵活，支持四个插入位置：'beforebegin'、'afterbegin'、'beforeend'、'afterend'，且不破坏已有节点。

拍我AI

AI视频生成平台PixVerse的国内版本

下载

• 用 el.insertAdjacentHTML('beforeend', 'new') 相当于 el.appendChild(...)，但支持 HTML 字符串
• 避免在循环中反复设置 innerHTML，性能差（每次重解析整个子树）
• 如果 HTML 字符串含事件绑定，需手动添加监听器——它只生成节点，不执行脚本

设置属性和内容时，优先用 textContent 而非 innerHTML 插入纯文本

当你只是想显示一段用户数据（比如用户名、错误提示），textContent 是首选：

• 自动转义 HTML 特殊字符，防止 XSS（textContent = '' 会原样显示为文本）
• 比 innerText 更快、更可靠（innerText 受 CSS 样式影响，且在某些浏览器中行为不一致）
• 设置富文本？那就必须用 innerHTML，但务必先过滤或使用 DOMPurify 等库清洗

别混用：el.textContent = 'hello' 不会加粗，只会显示字面量。

动态元素绑定事件要用事件委托，别在循环里重复 addEventListener

如果用 JS 批量创建了 50 个按钮，每个都写 btn.addEventListener('click', handler)，不仅内存占用高，移除时还容易遗漏。

• 正确做法：给父容器绑定一次事件，用 event.target 判断来源（例如 container.addEventListener('click', e => { if (e.target.matches('.item-btn')) {...} })）
• 注意：委托依赖事件冒泡，自定义事件或 stopPropagation() 会中断它
• 如果元素是异步加载或频繁增删，委托比逐个绑定更稳定

复杂交互逻辑（如拖拽、焦点管理）仍需在元素创建后单独初始化，不能全靠委托覆盖。