Article Categories

Selected Reading

Sibling of a list element in JavaScript?

Javascript Web Development Front End Technology

In JavaScript, you can find sibling elements using DOM traversal properties. Siblings are elements that share the same parent element and exist at the same level in the HTML structure.

Available Properties

JavaScript provides several properties to navigate between sibling elements:

nextSibling - Returns the next node (including text and comment nodes)
nextElementSibling - Returns the next element sibling only
previousSibling - Returns the previous node (including text and comment nodes)
previousElementSibling - Returns the previous element sibling only

Syntax

node.nextSibling
node.nextElementSibling
node.previousSibling
node.previousElementSibling

Key Difference: nextSibling vs nextElementSibling

The main difference is that nextSibling includes text nodes (whitespace), while nextElementSibling only returns HTML elements.

<!DOCTYPE html>
<html>
<head>
    <title>nextSibling vs nextElementSibling</title>
</head>
<body>
    <ul id="companies">
        <li id="samsung">Samsung</li>
        <li id="oneplus">One Plus</li>
        <li id="apple">Apple</li>
    </ul>
    <div id="result"></div>
    
    <script>
        const firstLi = document.getElementById("samsung");
        
        // nextSibling includes text nodes (whitespace)
        const nextNode = firstLi.nextSibling;
        console.log("nextSibling:", nextNode.nodeType); // 3 (text node)
        
        // nextElementSibling skips text nodes
        const nextElement = firstLi.nextElementSibling;
        console.log("nextElementSibling:", nextElement.innerHTML); // "One Plus"
        
        document.getElementById('result').innerHTML = 
            'Next element sibling: ' + nextElement.innerHTML;
    </script>
</body>
</html>

nextSibling: 3
nextElementSibling: One Plus
Next element sibling: One Plus

Using previousElementSibling

<!DOCTYPE html>
<html>
<head>
    <title>Previous Element Sibling</title>
</head>
<body>
    <ul>
        <li id="first">Samsung</li>
        <li id="second">One Plus</li>
        <li id="third">Apple</li>
    </ul>
    <div id="result"></div>
    
    <script>
        const thirdLi = document.getElementById("third");
        const previousElement = thirdLi.previousElementSibling;
        
        document.getElementById('result').innerHTML = 
            'Previous sibling of Apple: ' + previousElement.innerHTML;
    </script>
</body>
</html>

Previous sibling of Apple: One Plus

Traversing All Siblings

<!DOCTYPE html>
<html>
<head>
    <title>Traverse All Siblings</title>
</head>
<body>
    <ul>
        <li id="start">Samsung</li>
        <li>One Plus</li>
        <li>Apple</li>
        <li>Oppo</li>
    </ul>
    <div id="result"></div>
    
    <script>
        let current = document.getElementById("start");
        let output = "Elements: " + current.innerHTML;
        
        while (current.nextElementSibling) {
            current = current.nextElementSibling;
            output += " ? " + current.innerHTML;
        }
        
        document.getElementById('result').innerHTML = output;
    </script>
</body>
</html>

Elements: Samsung ? One Plus ? Apple ? Oppo

Comparison Table

Property	Includes Text Nodes	Returns	Use Case
nextSibling	Yes	Any node type	When you need all nodes
nextElementSibling	No	Element nodes only	Most common use case
previousSibling	Yes	Any node type	When you need all nodes
previousElementSibling	No	Element nodes only	Most common use case

Conclusion

Use nextElementSibling and previousElementSibling for most cases as they skip whitespace text nodes. The older nextSibling and previousSibling properties include all node types, which can cause unexpected results with whitespace.

Lokesh Yadav

Updated on: 2026-03-15T23:18:59+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next