JavaScript添加删除替换插入到某个节点的方法JavaScript添加删除替换插入到某个接点的方法在

JavaScript添加删除替换插入到某个节点的方法

在 JavaScript 中，操作 DOM 节点（添加、删除、替换、插入）是常见的任务。以下是常用的方法及其示例：

添加节点

(1) appendChild()

将一个节点添加到指定父节点的子节点列表的末尾。
语法：
```
parentNode.appendChild(childNode);
```

示例：

const parent = document.getElementById("parent");
const newChild = document.createElement("div");
newChild.textContent = "New Child";
parent.appendChild(newChild);

(2) insertBefore()

将一个节点插入到指定父节点的某个子节点之前。

语法：

parentNode.insertBefore(newNode, referenceNode);

示例：

const parent = document.getElementById("parent");
const newChild = document.createElement("div");
newChild.textContent = "New Child";
const referenceChild = document.getElementById("child");
parent.insertBefore(newChild, referenceChild);

删除节点

(1) removeChild()

从父节点中移除指定的子节点。
语法：
```
parentNode.removeChild(childNode);
```

示例：

const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.removeChild(child);

(2) remove()

直接从 DOM 中移除当前节点。
语法：
```
node.remove();
```

示例：

const child = document.getElementById("child");
child.remove();

替换节点

(1) replaceChild()

用新节点替换父节点中的某个子节点。

语法：

parentNode.replaceChild(newNode, oldNode);

示例：

const parent = document.getElementById("parent");
const oldChild = document.getElementById("child");
const newChild = document.createElement("div");
newChild.textContent = "New Child";
parent.replaceChild(newChild, oldChild);

(2) replaceWith()

用新节点替换当前节点。
语法：
```
oldNode.replaceWith(newNode);
```

示例：

const oldChild = document.getElementById("child");
const newChild = document.createElement("div");
newChild.textContent = "New Child";
oldChild.replaceWith(newChild);

插入节点

(1) insertAdjacentElement()

在相对于当前元素的指定位置插入一个新元素。

语法：

element.insertAdjacentElement(position, newElement);

参数：
- position：插入位置，可以是以下值之一：
  - "beforebegin"：在当前元素之前插入。
  - "afterbegin"：在当前元素的第一个子元素之前插入。
  - "beforeend"：在当前元素的最后一个子元素之后插入。
  - "afterend"：在当前元素之后插入。

示例：

const target = document.getElementById("target");
const newElement = document.createElement("div");
newElement.textContent = "New Element";
target.insertAdjacentElement("beforeend", newElement);

(2) insertAdjacentHTML()

在相对于当前元素的指定位置插入 HTML 字符串。

语法：

element.insertAdjacentHTML(position, htmlString);

示例：

const target = document.getElementById("target");
target.insertAdjacentHTML("beforeend", "<div>New Element</div>");

总结

操作	方法	描述
添加	`appendChild()`	在父节点末尾添加子节点
	`insertBefore()`	在指定子节点前插入新节点
删除	`removeChild()`	移除指定子节点
	`remove()`	直接移除当前节点
替换	`replaceChild()`	用新节点替换指定子节点
	`replaceWith()`	用新节点替换当前节点
插入	`insertAdjacentElement()`	在指定位置插入新元素
	`insertAdjacentHTML()`	在指定位置插入 HTML 字符串

通过掌握这些方法，可以灵活地操作 DOM 节点，实现动态的页面更新和交互。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

JavaScript添加 删除 替换 插入到某个节点的方法

JavaScript添加 删除 替换 插入到某个节点的方法

JavaScript添加删除替换插入到某个节点的方法

JavaScript添加删除替换插入到某个节点的方法