JavaScript创建添加新节点教程
2026-03-30 14:23:15
0浏览
收藏
本文深入浅出地讲解了JavaScript动态添加DOM节点的核心方法与最佳实践：只需两步——先用`document.createElement()`安全创建未挂载的元素节点，再通过`appendChild()`或`insertBefore()`精准插入到真实存在的父节点中；同时明确指出应避免使用危险低效的`innerHTML +=`操作，因其会丢失事件监听、清空表单状态并引发XSS风险，转而推荐`textContent`处理纯文本、`insertAdjacentHTML()`安全注入HTML，并反复强调检查父节点存在性这一极易被忽视却至关重要的调试习惯——原来动态操作DOM就像搭积木，造好再插准，简单、可控、不踩坑。
JavaScript 创建和添加新节点，核心就两步：先用 document.createElement() 造出来，再用 appendChild() 或 insertBefore() 塞进 DOM 树里。别被“动态操作 DOM”这种说法吓住，实际就是拼积木——造好再插进去。
怎么创建一个新元素节点？
用 document.createElement()，传入标签名字符串，它返回一个空的、未挂载的节点对象。
- 只支持标准 HTML 标签名（如
"div"、"span"、"li"），不支持自定义属性或内容 - 返回的是原生
Element实例，不是字符串，不能直接拼接或打印成 HTML 文本 - 创建后必须手动设置属性、文本或子节点，否则它什么也不显示
const newDiv = document.createElement("div");
newDiv.className = "alert";
newDiv.textContent = "操作成功";
怎么把新节点加到页面里？
最常用的是 appendChild()，把它追加为某个父节点的最后一个子节点；如果要插在中间，得用 insertBefore()。
parentNode.appendChild(childNode)：简单直接，但只能插末尾parentNode.insertBefore(newNode, referenceNode)：第二个参数是“参考节点”，新节点会插在它前面；如果referenceNode是null，效果等同于appendChild- 目标父节点必须已存在于 DOM 中（比如
document.body或通过querySelector找到的元素），否则会报错TypeError: Cannot read property 'appendChild' of null
const container = document.querySelector("#list");
const newItem = document.createElement("li");
newItem.textContent = "新任务";
// 插到最后
container.appendChild(newItem);
// 插到第一个位置（假设已有子节点）
const firstItem = container.firstElementChild;
container.insertBefore(newItem, firstItem);
为什么 innerHTML += 不推荐用于添加节点？
虽然 element.innerHTML += "..." 看起来更短，但它会触发整个 innerHTML 的重新解析和重建，导致已有子节点绑定的事件监听器全部丢失、输入框内容清空、焦点丢失。
- 性能差：每次 += 都要重新生成所有子节点的 DOM 结构
- 副作用大：破坏已有状态（比如
的 value、