DOM 操作

学习如何动态创建、添加、修改和删除页面元素。

学完本章你将： 掌握 DOM 元素的增删改查。

创建元素

javascript

// 创建新元素
let div = document.createElement("div");
div.textContent = "新创建的 div";
div.className = "my-class";
div.setAttribute("data-id", "123");

// 创建文本节点
let text = document.createTextNode("Hello World");

// innerHTML 批量创建
let container = document.getElementById("app");
container.innerHTML = `
    <div class="card">
        <h2>标题</h2>
        <p>内容段落</p>
    </div>
`;

// ⚠️ innerHTML 有 XSS 风险，不要插入用户输入
// container.innerHTML = userInput; // 危险！

添加元素

javascript

let parent = document.getElementById("list");
let item = document.createElement("li");
item.textContent = "新项目";

// 添加到末尾
parent.appendChild(item);

// 插入到指定位置
let reference = parent.firstElementChild;
parent.insertBefore(item, reference);

// 现代方法（推荐）
parent.append("文本", item);           // 末尾，支持多参数
parent.prepend(item);                  // 开头
reference.before(item);                // 之前
reference.after(item);                 // 之后

修改元素

javascript

let el = document.querySelector(".box");

// classList 操作（推荐）
el.classList.add("active");        // 添加类
el.classList.remove("hidden");     // 移除类
el.classList.toggle("dark");       // 切换类
el.classList.contains("active");   // 检查是否有类
el.classList.replace("old", "new");// 替换类

// 样式
el.style.color = "red";
el.style.fontSize = "16px";
el.style.display = "none";

// 批量设样式
Object.assign(el.style, {
    color: "blue",
    fontSize: "18px",
    fontWeight: "bold",
});

删除元素

javascript

let el = document.querySelector(".item");

// 方式 1：父元素 removeChild
el.parentNode.removeChild(el);

// 方式 2：直接 remove()（现代，推荐）
el.remove();

// 清空子元素
let container = document.getElementById("list");
container.innerHTML = "";       // 简单粗暴
while (container.firstChild) {  // 逐个子节点删除
    container.firstChild.remove();
}
container.replaceChildren();    // 现代清空（推荐）

DOM 操作

DOM 操作

创建元素

添加元素

修改元素

删除元素

🛠️ 学完试试这些工具