在Web开发中，经常需要修改和操作已有的HTML文档结构，其中一个常见的操作就是在指定元素之前（或之后）插入新元素。JavaScript提供了多种方法来完成这个任务，其中最常用的是insertBefore方法。

insertBefore方法是DOM（Document Object Model）中的一个方法，可以在指定元素之前插入一个新的子元素。具体来说，它的语法如下：

parentNode.insertBefore(newNode, referenceNode);

其中，parentNode表示要插入新元素的父元素，newNode表示要插入的新元素，referenceNode表示参考节点，也就是新节点将插入到这个节点之前。如果referenceNode为null，则newNode将直接插入到parentNode的末尾。

下面是一个简单的示例，演示了如何使用insertBefore方法在指定元素之前插入一个新元素：

HTML结构：

```html

```

JavaScript代码：

```javascript

// 创建一个新节点

var newItem = document.createElement("li");

newItem.innerHTML = "Item 4";

// 获取父元素

var list = document.getElementById("myList");

// 获取参考节点

var referenceNode = list.firstChild;

// 在参考节点之前插入新节点

list.insertBefore(newItem, referenceNode);

```

上面的代码会在id为“myList”的ul元素中，第一个li元素之前插入一个新的li元素，内容为“Item 4”。具体来说，它的步骤如下：

1. 创建一个新的li元素，并设置其innerHTML属性。

2. 获取要插入新节点的父元素，即id为“myList”的ul元素。

3. 获取一个参考节点，即id为“myList”的ul元素的第一个子节点，即第一个li元素。

4. 调用insertBefore方法，在参考节点之前插入新节点。

需要注意的是，insertBefore方法只是将新节点插入到指定位置，并不会删除原来的节点。如果需要删除原来的节点，需要先找到原来的节点，然后调用其parentNode的removeChild方法。

下面是一个完整的示例，演示了如何在JavaScript中使用insertBefore方法插入和删除节点：

HTML结构：

```html

Add Item

Delete Item

```

JavaScript代码：

```javascript

// 添加新节点

function addItem() {

// 创建一个新节点

var newItem = document.createElement("li");

newItem.innerHTML = "Item " + (document.getElementById("myList").childNodes.length + 1);

// 获取父元素

var list = document.getElementById("myList");

// 获取参考节点

var referenceNode = list.firstChild;

// 在参考节点之前插入新节点

list.insertBefore(newItem, referenceNode);

// 删除节点

function deleteItem() {

// 找到要删除的节点

var itemToDelete = document.getElementById("myList").lastChild;

// 找到父节点，并调用removeChild方法删除节点

itemToDelete.parentNode.removeChild(itemToDelete);

```

上面的代码定义了两个函数，一个是addItem，用于添加新的子节点；另一个是deleteItem，用于删除最后一个子节点。具体来说，它的步骤如下：

1. 在addItem函数中，创建一个新的li元素，并设置其innerHTML属性。

2. 获取要插入新节点的父元素，即id为“myList”的ul元素。

3. 获取一个参考节点，即id为“myList”的ul元素的第一个子节点，即第一个li元素。

4. 调用insertBefore方法，在参考节点之前插入新节点。

5. 在deleteItem函数中，找到要删除的节点，即id为“myList”的ul元素的最后一个子节点。

6. 调用该节点的parentNode的removeChild方法删除节点。

使用insertBefore方法可以轻松地在JavaScript中操作HTML文档结构，实现向指定元素之前插入新元素的功能。同时需要注意的是，在操作文档结构时，要注意避免影响页面布局和性能。