HTML Element .nextElementSibling / previousElementSibling

// Get the next sibling element.
var next = element.nextElementSibling;

// Get the previous sibling element.
var prev = element.previousElementSibling;

sample_nextElementSibling.html

<ul id="list">
	<li id="rei">Ayanami Rei</li>
	<li id="shinji">Ikari Shinji</li>
	<li id="asuka">Soryu Asuka</li>
	<li id="misato">Katsuragi Misato</li>
	<li id="kaworu">Nagisa Kaworu</li>
</ul>
<div id="accordion">
	<button class="acc-btn">NERV – Tokyo-3</button>
	<div class="acc-panel" style="display:none;">NERV is the organization that operates the Evangelion units.</div>
	<button class="acc-btn">About Angels</button>
	<div class="acc-panel" style="display:none;">The Angels range from the 3rd to the 18th.</div>
</div>

sample_nextElementSibling.js

// Pattern 1: Basic usage of nextElementSibling / previousElementSibling
var shinji = document.getElementById("shinji");
console.log(shinji.nextElementSibling.textContent);     // Outputs "Soryu Asuka".
console.log(shinji.previousElementSibling.textContent); // Outputs "Ayanami Rei".

// Pattern 2: null is returned for elements at the edge
var rei = document.getElementById("rei");
console.log(rei.previousElementSibling); // No previous sibling — returns null.
var kaworu = document.getElementById("kaworu");
console.log(kaworu.nextElementSibling);  // No next sibling — returns null.

// Pattern 3: Difference from nextSibling (includes text nodes)
console.log(rei.nextSibling.nodeType);        // Text node (newline) returns 3.
console.log(rei.nextElementSibling.nodeType); // HTML element returns 1.

// Pattern 4: Build an accordion menu
// Toggle the panel that immediately follows each button.
var accBtns = document.querySelectorAll(".acc-btn");
accBtns.forEach(function(btn) {
	btn.addEventListener("click", function() {
		var panel = btn.nextElementSibling; // Gets the div.acc-panel right after the button.
		if (panel.style.display === "none") {
			panel.style.display = "block";
		} else {
			panel.style.display = "none";
		}
	});
});

View sample page

element.nextElementSibling and element.previousElementSibling are properties that navigate to adjacent elements among siblings that share the same parent element. nextSibling and previousSibling can return text nodes and comment nodes, whereas nextElementSibling and previousElementSibling return only HTML elements, making them the safer choice for typical DOM manipulation.

Combining these properties with element.parentNode and element.children lets you move freely through the DOM tree. For example, you can use them to build an accordion menu that toggles the visibility of the element following a clicked item.

To search for an ancestor element instead of a sibling, use element.closest(). To search among descendants, use element.querySelector().