Element nextSibling Property - Javascript DOM

Javascript examples for DOM:Element nextSibling

  1. HOME
  2. Javascript
  3. DOM
  4. Element nextSibling

Description

The nextSibling property returns the node as a Node object immediately following the specified node with the same parent.

nextSibling returns the next sibling node as an element node, a text node or a comment node.

nextElementSibling returns the next sibling node as an element node ignoring text and comment nodes.

This property is read-only.

Return Value

A Node object, representing the next sibling of the node, or null if there is no next sibling

The following code shows how to get the HTML content of the next sibling of a list item:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<p>Example list:</p>

<ul>
   <li id="item1">(first li)</li>
   <li id="item2">(second li)</li>
</ul>/*  ww w  . j  a  v a  2  s  . co  m*/

<button onclick="myFunction()">Test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("item1").nextSibling.innerHTML;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Related Tutorials