在元素前添加 div - Javascript

在Web开发中，我们经常需要在某个元素前添加一个div元素。本文章将介绍如何使用Javascript在元素前添加div。

使用insertBefore()方法

使用该方法，我们需要以下步骤：

1. 创建一个要添加的div元素
2. 使用document.getElementById()获取元素
3. 使用parentNode.insertBefore()方法将新的div插入到目标元素的前面。

代码示例：

// 获取父元素
var parentElement = document.getElementById('parent');

// 创建要添加的div元素
var newDiv = document.createElement('div');

// 在div中添加文本
newDiv.innerHTML = '新的div';

// 在目标元素前插入新的div
parentElement.parentNode.insertBefore(newDiv, parentElement);

使用insertAdjacentElement()方法

和insertBefore()方法类似，insertAdjacentElement()方法可以在指定元素的前后添加一个元素。

使用该方法，我们需要以下参数：

1. 插入的位置，"beforebegin"表示在目标元素的前面，"afterbegin"表示在目标元素的里面的前面，"beforeend"表示在目标元素的里面的后面，"afterend"表示在目标元素的后面。
2. 要插入的元素。

代码示例：

// 获取要插入的元素
var parentElement = document.getElementById('parent');

// 创建要添加的div元素
var newDiv = document.createElement('div');

// 在div中添加文本
newDiv.innerHTML = '新的div';

// 在目标元素前插入新的div
parentElement.insertAdjacentElement('beforebegin', newDiv);

以上就是javascript在元素前添加div的两种方法。