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

在JavaScript中，我们可以使用insertBefore和insertAfter方法来向文档中插入新的元素。这些方法可以帮助我们在指定位置追加和删除元素，并且非常实用。

insertBefore方法

insertBefore方法可以将一个新的元素插入到目标元素之前。它需要两个参数：要插入的新元素和目标元素。

语法：

parentNode.insertBefore(newNode, referenceNode);

其中，parentNode是要插入新元素的父元素，newNode是要插入的新元素，referenceNode是目标元素，它是插入位置的参考点。

如果referenceNode参数为null，则新元素将被添加到父元素的末尾。下面是一个示例：

```html

```

在这个示例中，我们首先创建了一个新的p元素，并将其附加到其中。然后，我们通过获取id为“myDiv”的元素实现了引用节点。最后，我们使用parentNode.insertBefore()方法在myDiv元素之前插入新的p元素。

insertAfter方法

在JavaScript中，insertAfter方法并不存在。但与此方法等效的代码可以通过以下步骤来编写：

第一步：获取目标元素的父元素

第二步：使用目标元素.nextSibling获取目标元素之后的元素。

第三步：如果目标元素没有下一个兄弟节点，则将新元素附加到父元素末尾；否则，将新元素插入到下一个兄弟节点之前。

下面是一个示例：

```html

```

在这个示例中，我们创建了一个新的p元素并将其附加到其中。然后，我们使用myDiv.nextSibling获取下一个兄弟节点，并将其存储在变量nextElement中。如果目标元素没有下一个兄弟节点，则我们使用parentNode.appendChild()方法将新元素附加到父元素的末尾。否则，我们使用parentNode.insertBefore()方法将新元素插入到下一个兄弟节点之前。

删除元素

在JavaScript中，我们可以使用parentNode.removeChild()方法来删除一个元素。这个方法需要一个参数：要被删除的元素。

语法:

parentNode.removeChild(childNode);

需要注意的是，删除元素时只能通过其父元素来删除。

示例：

```html

```

在这个示例中，我们使用getElementById()方法获取了id为“myDiv2”的元素。然后，我们使用parentNode.removeChild()方法从它的父元素中删除该元素。这样，id为“myDiv2”的元素将从文档中彻底删除。

总结

使用insertBefore和insertAfter方法可以帮助我们动态向文档中插入新的元素。

要删除一个元素，我们需要先获取其父元素，然后使用parentNode.removeChild()方法。

这些方法可以使我们在JavaScript中更加轻松地操作文档和元素。无论是在新建一个网页还是在对现有网页进行修改，这些方法都会很有用。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/