前端Wiki/JavaScript/进阶/DOM 操作

创建与删除节点

动态生成内容（列表、卡片、评论）需要「创建节点 → 设置内容 → 插入页面」三步：document.createElement('li') 创建元素，el.textContent = ... 填内容，parent.append(el) 插入到父元素末尾。类似的方法还有 prepend（插到开头）、before/after（插到某元素前后）。

删除节点很简单：el.remove() 自我删除。批量更新时反复增删节点会引起多次重排（reflow），性能敏感的场景可以先用 DocumentFragment 在内存里拼好，再一次性插入。

提示：不要在循环里用 innerHTML += 拼接列表——每次都会把整个容器重新解析一遍，又慢又容易丢失元素上绑定的事件。

本节要点三步曲：createElement 创建、设置内容、append 插入；remove 删除；批量插入用 DocumentFragment 更快。

HTML

<ul id="todo"><li>已有任务</li></ul>
<button id="addBtn">添加一项</button>
<script>
  const todo = document.getElementById('todo');
  const btn = document.getElementById('addBtn');

  btn.addEventListener('click', () => {
    // 第一步：创建新节点
    const li = document.createElement('li');
    // 第二步：设置内容与属性
    li.textContent = '新任务 ' + (todo.children.length + 1);
    // 第三步：插入到父元素末尾
    todo.append(li);

    console.log('当前任务数：' + todo.children.length);
  });

  // 其他插入方式：
  // todo.prepend(li)              插到最前面
  // todo.firstElementChild.remove()  删除第一个子元素
</script>

🔗 相关词条元素列表事件 DOM 操作 DOM

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读