如何添加、删除、替换和克隆 DOM 节点？

推荐答案

添加 DOM 节点

1. appendChild(): 将一个节点添加到父节点的子节点列表的末尾。

   const parent = document.getElementById('parent');
   const newElement = document.createElement('div');
   newElement.textContent = '新元素';
   parent.appendChild(newElement);

2. insertBefore(): 在指定的子节点之前插入一个新节点。

   const parent = document.getElementById('parent');
   const referenceNode = document.getElementById('existingChild');
   const newElement = document.createElement('p');
   newElement.textContent = '新段落';
   parent.insertBefore(newElement, referenceNode);

删除 DOM 节点

1. removeChild(): 从父节点删除一个子节点。

   const parent = document.getElementById('parent');
   const childToRemove = document.getElementById('childToRemove');
   parent.removeChild(childToRemove);

2. remove(): 直接从 DOM 中移除节点 (节点本身调用)。

    const childToRemove = document.getElementById('childToRemove');
    childToRemove.remove();

替换 DOM 节点

1. replaceChild(): 将父节点的现有子节点替换为新的节点。

   const parent = document.getElementById('parent');
   const oldChild = document.getElementById('oldChild');
   const newChild = document.createElement('span');
   newChild.textContent = '新的 Span';
   parent.replaceChild(newChild, oldChild);

克隆 DOM 节点

1. cloneNode(): 创建一个节点的副本。

   • cloneNode(false): 浅拷贝，只复制节点本身，不复制子节点。
   • cloneNode(true): 深拷贝，复制节点及其所有子节点。

   const originalNode = document.getElementById('original');
   const shallowClone = originalNode.cloneNode(false);
   const deepClone = originalNode.cloneNode(true);
   
   // 将克隆的节点添加到 DOM 中
   document.body.appendChild(shallowClone);
   document.body.appendChild(deepClone);

本题详细解读

添加 DOM 节点详解

• appendChild():

  • 是最常用的添加节点方法。
  • 只能将新节点添加到父元素的末尾。
  • 如果插入的是文档中已存在的节点，会将该节点移动到新位置。
  • 返回被添加的节点引用。

• insertBefore():

  • 可以更灵活地指定插入位置，可以在现有子节点之前插入。
  • 第一个参数是新节点，第二个参数是参考节点，新节点会插入到参考节点之前。
  • 如果参考节点为null，行为与appendChild()相同。
  • 返回被添加的节点引用。

删除 DOM 节点详解

• removeChild():

  • 只能从父节点删除子节点。
  • 必须知道父节点和要删除的子节点。
  • 返回被删除的节点引用。

• remove():

  • 相对 removeChild 更简洁，可以直接在节点本身调用
  • 没有返回值。
  • 如果节点不存在或者已经被删除，不会报错。
  • 现代浏览器支持。

替换 DOM 节点详解

• replaceChild():
  • 必须知道父节点，旧节点，和新节点。
  • 将父节点的某个子节点替换成新的节点。
  • 返回被替换的旧节点引用。

克隆 DOM 节点详解

• cloneNode():
  • 用于创建节点的副本。
  • 浅拷贝和深拷贝的区别：浅拷贝只复制节点本身，深拷贝会复制节点及其所有子节点和属性。
  • 通常使用深拷贝，确保克隆的节点是一个完整且独立的副本。
  • 克隆的节点最初不会显示在页面上，需要手动添加到 DOM 中。
  • 返回克隆的节点。