| 创建元素 | document.createElement(“tag”) | 在内存中创建一个新的元素 |
|---|
| 设置文字内容 | element.textContent = ”…” | 向元素中添加文本 |
| 设置属性 | element.id, element.className, element.style | 修改元素的属性或样式 |
| 添加到 DOM | append(), prepend(), insertBefore() | 把元素插入页面中 |
| 删除元素 | removeChild() | 从父节点中删除元素 |
// ==================== Step 1: 创建元素 ====================
// 使用 document.createElement() 创建一个新的 <h1> 元素
// 注意：此时它只是被创建在内存中，还没有添加到页面中
const newH1 = document.createElement("h1");
// ==================== Step 2: 添加属性/内容 ====================
// 设置 <h1> 元素中的文字内容
newH1.textContent = "I like pizza";
// 为元素添加 id 属性（可用于 CSS 或 JS 选择）
newH1.id = "myH1";
// 直接修改样式属性
newH1.style.color = "tomato"; // 文字颜色
newH1.style.textAlign = "center"; // 居中对齐
// ==================== Step 3: 把元素插入到页面中 ====================
// 有多种方式可以把元素添加进 HTML 页面（DOM 树）
// 1️⃣ 在页面最前面插入（成为第一个子元素）
// document.body.prepend(newH1);
// 2️⃣ 在页面最后面插入（成为最后一个子元素）
// document.body.append(newH1);
// 3️⃣ 插入到某个特定元素中（例如 box2）
// document.getElementById("box2").append(newH1);
// 4️⃣ 插入到指定元素之前
// const box2 = document.getElementById("box2");
// document.body.insertBefore(newH1, box2);
// 5️⃣ 选中多个元素并插入到特定位置
const boxes = document.querySelectorAll(".box");
// insertBefore(新元素, 参考元素)
// 表示把 newH1 插入到 boxes[2]（第三个 .box）之前
document.body.insertBefore(newH1, boxes[2]);
// ==================== Step 4: 删除元素 ====================
// 从父节点中移除指定子元素
// removeChild(要删除的元素)
document.body.removeChild(newH1);