Skip to content

Get sibling element JavaScript

  • by

To get the sibling element of an HTML element using JavaScript, you can use the nextElementSibling and previousElementSibling properties. Here’s how you can retrieve the sibling elements:

1. Get the next sibling element:

var element = document.getElementById('yourElementId');
var nextSibling = element.nextElementSibling;

2. Get the previous sibling element:

var element = document.getElementById('yourElementId');
var previousSibling = element.previousElementSibling;

Note: these properties return null if there are no sibling elements, so make sure to handle such cases accordingly.

Get sibling element JavaScript example

Simple example code.

<!DOCTYPE html>
<html>
<head>
  <title>Get Sibling Element Example</title>
</head>
<body>
  <div id="parent">
    <div id="sibling1">Sibling 1</div>
    <div id="target">Target Element</div>
    <div id="sibling2">Sibling 2</div>
  </div>

  <script>
    var targetElement = document.getElementById('target');

    // Get the next sibling element
    var nextSibling = targetElement.nextElementSibling;
    console.log('Next Sibling:', nextSibling);

    // Get the previous sibling element
    var previousSibling = targetElement.previousElementSibling;
    console.log('Previous Sibling:', previousSibling);
  </script>
</body>
</html>

Output:

Get sibling element JavaScript

When you run the example and check the browser console, you will see the logged output with the next and previous sibling elements.

Comment if you have any doubts or suggestions on this Js element topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published. Required fields are marked *