HTML - DOM Element nextSibling Property

Quiz

The HTML DOM Element nextSibling property is used to access the immediate next node in sequence from the current node within the DOM tree. The 'next sibling' is the immediate next node of the specified element.

Syntax

Following is the syntax of the HTML DOM Element nextSibling property −

element.nextSibling

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns the next sibling node of a specified node of a specified DOM element.

Example 1: Fetching the Next Sibling

The following program demonstrates the usage of the HTML DOM Element nextSibling property. It displays the sibling nodes within an HTML document −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element nextSibling</title>
<style> 
   #output1 {
       border: 1px solid #ccc;
       padding: 10px;
       margin-top: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element nextSibling Property</h3>
<p>Below are the div Contents..</p>
<div id="parent1">
<div id="first">First</div>Text node in between
<div id="second">Second</div>
</div>  
<div id="output1">Fetching the next sibling node after 'First'.</div>
<script>
   const firstDiv = document.getElementById('first');
   const outputDiv = document.getElementById('output1');
   outputDiv.innerHTML += `<p>Next Sibling Node: 
   <strong>${firstDiv.nextSibling.nodeName}</strong></p>`;
   outputDiv.innerHTML += `<p>Content: 
   "${firstDiv.nextSibling.textContent.trim()}"</p>`;  
</script>
</body>
</html>

The above program displays the sibling nodes of a "div" element within a document.

Example 2: Iterating through Siblings

Here is another example of using HTML DOM Element nextSibling property. We use this property to display the text of each sibling of the <div> element within the document −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element nextSibling</title>
<style> 
   .output {
       border: 1px solid #ccc;
       padding: 10px;
       margin-top: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element nextSibling Property</h3> 
<p>Original div content:</p>
<div id="parent2">
   <div>First</div>
   <div>Second</div>
   <div>Third</div>
</div>
<div class="output" id="output2">Iterating over the child nodes:</div>  
<script>
const parentDiv=document.getElementById('parent2');
let currentEle = parentDiv.firstElementChild;
let outputText = '';
// Iterate through each child node
while (currentEle) {
   outputText+=`<p>${currentEle.textContent}</p>`;
   currentEle=currentEle.nextElementSibling;
}
const outputDiv=document.getElementById('output2');
outputDiv.innerHTML += outputText;
</script>
</body>
</html>

Once the above program is executed, it displays the content of each sibling of the div element.

Supported Browsers

Property
nextSibling	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page