HTML中Node节点的增删改查本文主要记录原生Node节点的一些api，如增加节点、删除节点、替换节点、查找节点。希望

本文主要记录HTML中Node节点的增删改查api

思维导图

添加节点

after

Element.after(node1, node2, ...)主要将参数节点插入到当前节点后方，其中参数可以是Node、字符串（会转为Text节点）。用法如下

  let container = document.createElement("div");
  let p = document.createElement("p");
  container.appendChild(p);
  let span = document.createElement("span");

  p.after(span, "Text");

  console.log(container.outerHTML);
  // "<div><p></p><span></span>Text</div>"

append

Element.append(param1, param2, ...)主要将参数作为当前节点的孩子元素，插入到当前元素孩子元素最后；其中参数可以为Node、字符串会转为Text节点）两种类型。用法如下:

let div = document.createElement("div")
let p = document.createElement("p")
div.append("Some text", p)

console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]

before

Element.before(param1, param2, ...)主要将参数插入到当前节点前方，同上述after插入相反，参数类型为Node和字符串两种类型。例子如下：

let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.before(span, "Text");

console.log(container.outerHTML);
// "<div><span></span>Text<p></p></div>"

prepend

Element.prepend(param1, param2, ...)将参数作为当前节点的孩子元素，插入到最前面（与append插入相反）；参数类型为Node和字符串。例子如下：

let div = document.createElement("div");
let p = document.createElement("p");
div.prepend("Some text", p);

console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]

appendChild

Node.appendChild(node)将一个节点附加到当前节点的子节点列表末尾处，参数类型为Node。其用法如下：

// 创建一个新的段落元素 <p>，然后添加到 <body> 的最尾部
var p = document.createElement("p");
document.body.appendChild(p);

insertBefore

parentNode.insertBefore(newNode, referenceNode)该函数主要将newNode插入到referenceNode之前，返回值为newNode。例子如下：

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
//创建一个新的、普通的<span>元素
var sp1 = document.createElement("span");

//插入节点之前，要获得节点的引用
var sp2 = document.getElementById("childElement");
//获得父节点的引用
var parentDiv = sp2.parentNode;

//在 DOM 中在 sp2 之前插入一个新元素
parentDiv.insertBefore(sp1, sp2);
</script>

删除节点

remove

Element.remove()将当前节点从DOM树移除，包括孩子节点。其用法如下：

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<div id="div-03">Here is div-03</div>
<script>
    const element = document.getElementById('div-02');
    element.remove(); // Removes the div with the 'div-02' id
</script>

removeChild

Node.removeChild(child)从当前节点删除一个孩子节点，并将孩子节点返回。其大概用法如下：

// 移除一个元素节点的所有子节点
var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

查找节点

querySelector

Element.querySelector(selectors)返回当前节点下第一个与选择器匹配的元素。其用法如下：

    var baseElement = document.querySelector("p");// 选择第一个p元素

querySelectorAll

Element.querySelectorAll(selectors)返回当前节点下所有与选择器匹配的元素，返回值为NodeList类型。其用法如下：

let divList = document.querySelectorAll('div');
// 返回结果为：NodeList[div，div, ...]

getElementsByClassName

Element.getElementsByClassName(classnames)返回当前节点下孩子节点class属性与classnames匹配的元素。返回值为HTMLCollection类型 ;其用法如下：

    let loadinglist = document.getElementsByClassName('loading');// 返回class中包含loading的元素
    // 返回结果：HTMLCollection[div, ...]

getElementsByTagName

Element.getElementsByTagName(tagName)返回当前节点下孩子节点的tag与tagName匹配的元素，返回值为HTMLCollection类型。其用法如下:

    document.getElementsByTagName('div');// 返回document下tagName为div的元素集合
    // 返回结果：HTMLCollection[div, ...]

修改节点

replaceChildren

Element.replaceChildren(node1, node2, ...)方法主要是将参数替换掉当前节点的孩子节点，其参数类型可以为Node和字符串。例子如下：

  const selectedTransferOptions = document.querySelectorAll('#no option:checked');
  const existingYesOptions = document.querySelectorAll('#yes option');
  yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);

replaceWith

Element.replaceWith(node)用参数节点替换掉当前节点。例子如下：

const div = document.createElement("div");
const p = document.createElement("p");
div.appendChild(p);
const span = document.createElement("span");

p.replaceWith(span);

console.log(div.outerHTML);
// "<div><span></span></div>"

replaceChild

parentNode.replaceChild(newChild, oldChild)用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。其用法如下：

// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// 创建一个空的 span 元素节点
var sp1 = document.createElement("span");

// 添加一个 id 属性，值为'newSpan'
sp1.setAttribute("id", "newSpan");

// 创建一个文本节点
var sp1_content = document.createTextNode("新的 span 元素的内容.");

// 将文本节点插入到 span 元素中
sp1.appendChild(sp1_content);

// 获得被替换节点和其父节点的引用。
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// 用新的 span 元素 sp1 来替换掉 sp2
parentDiv.replaceChild(sp1, sp2);

// 结果：
// <div>
//   <span id="newSpan">新的 span 元素的内容.</span>
// </div>