JavaScript DOM 操作：创建与删除元素

网页加载完成后，文档对象模型（DOM）就构建好了。通过 JavaScript，你可以动态地向页面添加新内容，也可以移除已有内容。这种能力是现代 Web 应用实现交互性的核心。掌握如何创建和删除 DOM 元素，能让你灵活控制页面结构，无需刷新整个页面。

创建并插入新元素

要往页面里加东西，先得造出这个“东西”，再把它塞进合适的位置。

1. 调用 document.createElement('标签名') 创建一个新元素节点。
   例如：const newDiv = document.createElement('div');
   这行代码在内存中生成了一个 <div> 元素，但它还没出现在页面上。

2. 设置新元素的内容或属性。

   • 设置文本内容：使用 textContent 属性。
     示例：newDiv.textContent = '这是新段落';
     （比 innerHTML 更安全，不会解析 HTML，避免 XSS 风险）
   • 设置 HTML 内容：使用 innerHTML 属性（谨慎使用）。
     示例：newDiv.innerHTML = '<strong>加粗文字</strong>';
   • 设置属性：使用 setAttribute() 方法。
     示例：newDiv.setAttribute('class', 'highlight');

3. 选择一个已存在的父元素作为插入目标。
   通常用 document.querySelector() 或 getElementById() 获取。
   示例：const container = document.getElementById('app');

4. 把新元素插入到页面中。有四种常用方式：

   • 在父元素末尾添加：调用 appendChild()
     示例：container.appendChild(newDiv);
   • 在父元素开头添加：调用 prepend()
     示例：container.prepend(newDiv);
   • 在某个兄弟元素之前插入：调用 insertBefore()
     示例：container.insertBefore(newDiv, existingElement);
   • 用字符串模板一次性插入多个元素：使用 insertAdjacentHTML()
     示例：container.insertAdjacentHTML('beforeend', '<p>新段落</p>');
     第一个参数可选值：'beforebegin'、'afterbegin'、'beforeend'、'afterend'

注意：同一个 DOM 节点不能同时存在于多个位置。如果你把一个已存在的元素再次插入，它会自动从原位置移除，再放到新位置。

删除现有元素

删掉页面上的某个元素，关键是要拿到它的引用，然后让它的父元素把它踢出去。

1. 获取要删除的元素。
   使用选择器方法，比如：
   const elemToDelete = document.querySelector('.remove-me');

2. 确认该元素有父节点（几乎所有页面元素都有）。
   可以通过 elemToDelete.parentNode 访问其父元素。

3. 调用父元素的 removeChild() 方法。
   示例：elemToDelete.parentNode.removeChild(elemToDelete);

4. 更简单的方式（现代浏览器支持）：直接调用元素自身的 remove() 方法。
   示例：elemToDelete.remove();
   这个方法不需要手动找父节点，代码更简洁，推荐使用。

如果尝试删除一个已经不存在的元素（比如已经被删过），removeChild() 会报错，而 remove() 则静默失败。因此使用 remove() 更安全。

实战示例：动态待办事项列表

下面是一个完整的小例子，展示如何添加和删除任务项。

<div id="app">
  <input type="text" id="taskInput" placeholder="输入任务">
  <button id="addBtn">添加任务</button>
  <ul id="taskList"></ul>
</div>

// 获取关键元素
const input = document.getElementById('taskInput');
const addButton = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');

// 添加任务
addButton.addEventListener('click', () => {
  const text = input.value.trim();
  if (text === '') return; // 空内容不处理

  // 创建列表项 <li>
  const li = document.createElement('li');
  li.textContent = text;

  // 创建删除按钮
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '×';
  deleteBtn.style.marginLeft = '10px';
  deleteBtn.addEventListener('click', () => {
    li.remove(); // 点击时删除整个列表项
  });

  // 把按钮加到列表项里
  li.appendChild(deleteBtn);

  // 把列表项加到列表末尾
  taskList.appendChild(li);

  // 清空输入框
  input.value = '';
});

// 支持回车添加
input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    addButton.click();
  }
});

在这个例子中：

• 每次点击“添加任务”或按回车，都会创建一个新的 <li> 元素。
• 每个 <li> 包含任务文本和一个删除按钮。
• 点击删除按钮时，调用 li.remove() 直接删除自身。

常见陷阱与最佳实践

使用 DocumentFragment 的示例：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('div');
  item.textContent = `项目 ${i + 1}`;
  fragment.appendChild(item);
}
document.body.appendChild(fragment); // 一次插入，高效