使用insertBefore，和insertAfter,在指定位置追加与删除元素

标题：使用insertBefore和insertAfter方法进行元素的添加与删除

引言：

在Web开发中，经常需要对DOM元素进行添加和删除操作，而insertBefore和insertAfter方法则是在指定位置进行元素的追加和移除操作的重要方法。本文将详细介绍这两个方法的使用，包括语法、参数以及实际案例的说明。

一、insertBefore方法的使用

1.语法：

parentNode.insertBefore(newNode, referenceNode)

2.参数说明：

- parentNode: 需要插入元素的父节点

- newNode: 需要插入的新节点

- referenceNode: 插入位置的参考节点，新节点将插入到该节点的前面

3.示例代码：

```javascript

// 创建新节点

var newNode = document.createElement("p");

newNode.innerHTML = "这是新插入的元素";

// 获取父节点

var parentNode = document.getElementById("parent");

// 获取参考节点

var referenceNode = document.getElementById("reference");

// 插入新节点

parentNode.insertBefore(newNode, referenceNode);

```

二、insertAfter方法的使用

1.语法：

parentNode.insertAfter(newNode, referenceNode)

2.参数说明：

- parentNode: 需要插入元素的父节点

- newNode: 需要插入的新节点

- referenceNode: 插入位置的参考节点，新节点将插入到该节点的后面

3.示例代码：

```javascript

// 创建新节点

var newNode = document.createElement("p");

newNode.innerHTML = "这是新插入的元素";

// 获取父节点

var parentNode = document.getElementById("parent");

// 获取参考节点

var referenceNode = document.getElementById("reference");

// 插入新节点

parentNode.insertBefore(newNode, referenceNode.nextSibling);

```

三、案例说明

案例一：在指定位置插入一个新元素

假设有一个包含多个段落的父元素，我们想在第二个段落之后插入一个新的段落。

```html

```

```javascript

// 创建新节点

var newNode = document.createElement("p");

newNode.innerHTML = "这是新插入的段落";

// 获取父节点

var parentNode = document.getElementById("parent");

// 获取参考节点

var referenceNode = parentNode.getElementsByTagName("p")[1];

// 插入新节点

parentNode.insertBefore(newNode, referenceNode.nextSibling);

```

案例二：移除指定位置的元素

假设有一个包含多个列表项的父元素，并且想要移除第三个列表项。

```html

• 列表项1
• 列表项2
• 列表项3
• 列表项4

```

```javascript

// 获取父节点

var parentNode = document.getElementById("parent");

// 获取参考节点

var referenceNode = parentNode.getElementsByTagName("li")[2];

// 移除节点

parentNode.removeChild(referenceNode);

```

结论：

通过使用insertBefore和insertAfter方法，我们可以在指定位置上追加和删除元素。这两个方法能够有效地改变DOM结构，实现对页面元素的灵活控制，为Web开发带来了更多的可能性。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/