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

在前端开发中，经常需要在指定位置插入和删除元素，这时候可以使用insertBefore和insertAfter方法来实现。

insertBefore方法可以在指定节点之前添加一个新的节点，其语法如下：

```

parentNode.insertBefore(newNode, referenceNode);

```

其中，parentNode表示父节点，newNode表示要插入的新节点，referenceNode表示参考节点，在参考节点之前插入新节点。如果referenceNode为null，则新节点将被添加到父节点的末尾。

下面是一个具体的例子，向一个div元素中插入一个p元素，新元素会在原有的span元素之前插入：

HTML代码：

```html

```

JavaScript代码：

```javascript

let parent = document.getElementById('test'); // 获取父节点

let oldNode = parent.firstChild; // 获取参考节点

let newNode = document.createElement('p'); // 创建新的p元素

newNode.innerHTML = '这是一个p元素'; // 为新元素添加内容

parent.insertBefore(newNode, oldNode); // 在参考节点之前插入新节点

```

运行结果：

```html

```

insertAfter方法可以在指定节点之后添加一个新的节点，由于浏览器并没有提供原生的方法来实现insertAfter，因此我们需要自己编写一个函数来实现。

下面是一个自定义的insertAfter函数，可以在指定节点之后插入一个新的节点。

JavaScript代码：

```javascript

function insertAfter(newNode, referenceNode) {

let parent = referenceNode.parentNode;

if (referenceNode.nextSibling) {

parent.insertBefore(newNode, referenceNode.nextSibling)

} else {

parent.appendChild(newNode)

}

}

```

在这个自定义函数中，我们首先获取referenceNode节点的父节点，然后判断参考节点的下一个兄弟节点是否存在，如果存在，则在该节点之前插入新节点，否则将新节点添加到父节点的末尾。

下面是一个例子，向一个div元素中插入一个p元素，新元素会在原有的span元素之后插入：

HTML代码：

```html

```

JavaScript代码：

```javascript

let parent = document.getElementById('test'); // 获取父节点

let oldNode = parent.firstChild; // 获取参考节点

let newNode = document.createElement('p'); // 创建新的p元素

newNode.innerHTML = '这是一个p元素'; // 为新元素添加内容

insertAfter(newNode, oldNode); // 在参考节点之后插入新节点

```

运行结果：

```html

```

除了插入节点，我们还可以使用insertBefore和insertAfter方法删除节点，只需要将要删除的节点传递给父节点的removeChild方法即可。

HTML代码：

```html

```

JavaScript代码：

```javascript

let parent = document.getElementById('test'); // 获取父节点

let oldNode = parent.firstChild; // 获取要删除的节点

parent.removeChild(oldNode); // 删除节点

```

运行结果：

```html

```

总结：

在前端开发中，插入和删除节点是常见的操作，我们可以使用insertBefore和insertAfter方法来实现这些功能。如果需要在指定节点之后插入新的节点，由于浏览器不提供原生的方法，我们可以自定义一个函数来实现。同时，我们也可以使用父节点的removeChild方法来删除指定的节点。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！