JavaScript 创建与删除 DOM 元素

前两篇学了拿元素和改元素，这一篇学从无到有。创建元素用 createElement，插入用 append，删除用 remove。最后用一个动态生成列表的完整例子把流程串起来。

document.createElement()

createElement 按标签名创建元素，但创建出来的只是一棵孤零零的节点，还没有出现在页面上。它需要两步，设置内容，再插入到某个已有元素里。

const li = document.createElement('li');
li.textContent = '新项目';

此时 li 已经存在但页面看不到，要插入才会显示。

appendChild() 与 append()

appendChild 把一个子节点追加到元素末尾，append 更灵活，可以一次追加多个节点或文本。

<ul id="list">
  <li>苹果</li>
</ul>

const list = document.querySelector('#list');
const li = document.createElement('li');
li.textContent = '香蕉';

list.appendChild(li); // 追加一个子元素

用 append 可以一次性追加多个内容，既支持元素也支持文本。

const list = document.querySelector('#list');
const li1 = document.createElement('li');
const li2 = document.createElement('li');

li1.textContent = '香蕉';
li2.textContent = '橘子';

list.append(li1, li2, '末尾直接追加文本也行');

推荐优先用 append，一个方法覆盖所有追加场景。

removeChild() 与 remove()

removeChild 需要先从父元素身上删子元素，得先知道父元素是谁。remove 更直接，元素自己调用自己就把自己删掉了。

<ul id="list">
  <li>苹果</li>
  <li>香蕉</li>
</ul>

const list = document.querySelector('#list');
const firstLi = list.querySelector('li');

// removeChild 写法，要先拿到父元素
list.removeChild(firstLi);

// remove 写法，自己删自己
firstLi.remove();

推荐用 remove，不需要关心父元素是谁，简洁直观。

实操，动态生成列表

把数组数据变成页面列表，是创建元素的经典场景。完整例子如下。

<ul id="list"></ul>

const list = document.querySelector('#list');
const fruits = ['苹果', '香蕉', '橘子', '葡萄'];

for (const fruit of fruits) {
  const li = document.createElement('li');
  li.textContent = fruit;
  list.append(li);
}

运行后页面出现四个 li，内容分别是苹果、香蕉、橘子、葡萄。如果数组换成接口返回的数据，这段代码就能直接用于渲染列表，实际开发里非常常见。

小结

• createElement 创建元素，创建后还要设置内容和插入才会显示。
• appendChild 追加单个节点，append 更灵活，可以一次追加多个节点或文本。
• removeChild 需要父元素配合，remove 自己删自己，更简洁。
• 动态列表的套路，遍历数组，逐个创建元素，再 append 到容器。
• 下一篇讲怎么用 JavaScript 控制元素的样式。