HTML DOM nextSibling property

HTML DOM Element Object

nextSiblingThis property returns the next sibling node immediately following the element node (including text nodes, comment nodes such as carriage returns, line breaks, spaces, text, etc.).

If there is no next sibling, this property returnsnull.

Spaces are treated as text, and text is treated as a node. Comments are also treated as nodes.

To avoid the problem of nextSibling returning #text or #comment nodes, you can usenextElementSiblingOnly returns element nodes.

UsingpreviousSiblingproperty can return the previous node at the same tree level as the specified node.

UsingchildNodesThis property can return any child node of the specified node.

Syntax:

node.nextSibling

<div id="div-1">Here is div</>-1</div>
<div id="div-2">Here is div</>-2</div>
<script>
var x = document.querySelector("#div-1).nextSibling.nodeName;
document.getElementById("result").innerHTML = x;
</script>

However, if the spaces between DIVs are removed, the returned value will not be #text:

<div id="div-1">Here is div</>-1</div><div id="div-2">Here is div</>-2</div>
<script>
var x = document.querySelector("#div-1).nextSibling.innerHTML;
document.getElementById("result").innerHTML = x;
</script>

Browser Compatibility

All browsers fully support the nextSibling property:

Technical Details

Related References

HTML DOM Reference:node .childNodes property

HTML DOM Reference:node .firstChild property

HTML DOM Reference:node .lastChild property

HTML DOM Reference:node .parentNode property

HTML DOM Reference:node .previousSibling property

HTML DOM Reference:node .nodeName property

HTML DOM Element Object