How to create sibling nodes in javascript

JavaScript is a programming language commonly used for front-end development. It can create, modify, delete HTML elements and other DOM operations. In HTML documents, sibling nodes refer to all child nodes under the same parent node. Sometimes we need to create a new sibling node through JavaScript to achieve dynamic effects or interactive functions on the web page.

To create sibling nodes, you need to operate DOM elements in the HTML document through JavaScript. DOM (Document Object Model) is a representation of HTML documents. It converts HTML documents into a tree structure. DOM elements can be accessed and manipulated using JavaScript.

Below, I will demonstrate how to use JavaScript to create sibling nodes through several cases.

1. Insert a new element before a sibling element

We can use the insertBefore() method to add a new element before a sibling element. The following is the sample code:

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, refNode);

In this example, first use the getElementById() method to obtain the reference node (that is, the element to create a sibling node), and then use the createElement() method to create a div element node and set its The innerHTML attribute is "new node". Finally, use the insertBefore() method to insert the new node into the parent node of the reference node and become the preceding sibling node of the reference node.

2. Insert a new element after a sibling element

If we need to add a new node after a sibling element, we can first get the next element of the sibling element sibling node and then insert a new node in front of it. The following is the sample code:

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 获取参考节点的下一个兄弟节点
var nextNode = refNode.nextSibling;

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, nextNode);

In this example, first use the getElementById() method to obtain the reference node, then create a div element node and set its innerHTML attribute to "new node". Then, use the nextSibling attribute to obtain the next sibling node of the reference node. Finally, use the insertBefore() method in the parent node of the reference node to insert the new node in front of the reference node's subsequent sibling node.

3. Insert new elements inside tags

If we want to add a node inside an existing tag, we can use the appendChild() method. The following is the sample code:

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("span");
newNode.innerHTML = "新节点";

// 将新节点添加到参考节点的内部
refNode.appendChild(newNode);

In this example, first use the getElementById() method to obtain the reference node, then create a span element node and set its innerHTML attribute to "new node". Finally, use the appendChild() method inside the reference node to add the new node to the label.

Summary

In JavaScript, we can create, modify, delete HTML elements and other DOM operations by operating DOM elements. One of the most common operations is to create new sibling nodes. . This article introduces three methods of creating sibling nodes through JavaScript, including inserting new elements before sibling elements, inserting new elements after sibling elements, and inserting new elements inside tags. We can choose different methods to achieve dynamic effects or interactive functions of web pages according to the actual situation.

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