Skip to main content

HTML DOM nextSibling & nextElementSibling Property in JAVA SCRIPT

Definition and Usage nextSibling ..
The nextSibling property returns the node immediately following the specified node, in the same tree level.
The returned node is returned as a Node object.
The difference between this property and nextElementSibling, is that nextSibling returns the next sibling node as an element node, a text node or a comment node, while nextElementSibling returns the next sibling node as an element node (ignores text and comment nodes).
This property is read-only.
Tip: Use the previousSibling property to return the previous node of the specified node, in the same tree level.
Return Value: A Node object, representing the next sibling of the node, or null if there is no next sibling
Syntax :node.nextSibling

Definition and Usage nextElementSibling..
The nextElementSibling property returns the element immediately following the specified element, in the same tree level.
The difference between this property and nextSibling, is that nextSibling returns the next sibling node as an element node, a text node or a comment node, while nextElementSibling returns the next sibling node as an element node (ignores text and comment nodes).
This property is read-only.
Tip: Use the previousElementSibling property to return the previous element of the specified element.
Return Value: A Node object, representing the next sibling of an element, or null if there is no next sibling.
Syntax : node.nextElementSibling
Differents way how to declare nextSibling & nextElementSibling Property in program.
CODING:
<!DOCTYPE html>
<html>
<body>
<h4 id="h4">Soft Languages:</h4>
<ul>
<li id="lan">C++</li><li>JAVA</li><li>PYTHON</li></ul>
<button onclick="con()">Next of C++</button>
<h4 id="h42">Web Languages:</h4>
<select  size="4">
<option id="Select">HTML</option><option>CSS</option><option>JAVA SCRIPT</option><option>XML</option></select><br><br>
<button onclick="con2()">Next of HTML</button>
<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text is considered as nodes.If you add whitespace before the first LI element, the result will be "undefined".</p>
<script>
function con() {
    var x = document.getElementById("lan").nextSibling.innerHTML;
    document.getElementById("h4").innerHTML += x;
}
function con2() {
    var a = document.getElementById("Select").nextElementSibling;
    document.getElementById("h42").innerHTML += a.text;
}
</script>
</body>
</html>

Comments