How to use insertBefore in javascript

In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

The following is a basic example of using the insertBefore() method:

// 获取要插入新节点的父节点  
var parentElement = document.getElementById('parent');  
  
// 创建新的元素节点  
var newElement = document.createElement('div');  
newElement.innerHTML = 'This is the new element';  
  
// 使用insertBefore方法插入新元素  
var referenceElement = parentElement.firstChild;  // 参考节点为父节点的第一个子节点  
parentElement.insertBefore(newElement, referenceElement);

In In this example, we first obtain a reference to a parent element (the ID is 'parent' in this example). Then, we created a new div element and added some text content to it. Finally, we use the insertBefore() method to insert the new element before the first child element of the parent element.

Note that the insertBefore() method will change the structure of the DOM tree. If you don't want to change the original DOM structure, you can consider using the appendChild() or insertBefore() method to add new nodes.

The above is the detailed content of How to use insertBefore in javascript. For more information, please follow other related articles on the PHP Chinese website!