HTML DOM Element nextSibling
Example
Return the HTML content of the next sibling of a list item:
Description
ThenextSibling property returns the next node on the same tree level.
ThenextSibling returnes a node object.
ThenextSibling property is read-only.
Important!
nextSibling returns the next siblingnode: An element node, a text node, or a comment node.
Whitespace between elements are also text nodes.
Alternative:
The nextElementSibling Property
nextElementSibling returns the next siblingelement (ignores text and comments).
See Also:
Nodes vs Elements
In the HTML DOM terminology:
Nodes are all nodes (element nodes, text nodes, and comment nodes).
Whitespace between elements are also text nodes.
Elements are only element nodes.
Siblings vs Element Siblings
Siblings are "brothers" and "sisters".
Siblings are nodes with the same parent (in the samechildNodes list).
Element Siblings are elements with the same parent (in the samechildren list).
childNodes vs children
childNodes returns childnodes (element nodes, text nodes, and comment nodes).
children returns childelements (not text and comment nodes).
nextSibling vs nextElementSibling
nextSibling returns the nextnode (an element node, a text node or a comment node).Whitespace between elements are also text nodes.
nextElementSibling returns the nextelement (not text and comment nodes).
previousSibling vs previousElementSibling
previousSibling returns the previousnode (an element node, a text node or a comment node).Whitespace between elements are also text nodes.
previousElementSibling returns the previouselement (not text and comment nodes).
Syntax
Return Value
| Type | Description |
| Node | The next sibling of the element.null if no next sibling exists. |
Browser Support
element.nextSibling is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
