In this section, we will learn what the Element nextSibling property is and how to use it in JavaScript.

What is Element nextSibling Property in JavaScript?

The JavaScript Element nextSibling property is used to get a reference to the next sibling of the current node (the one that invoked this property).

For example, if you have a list with three <li> elements with the values “Item 1”, “Item 2”, and “Item 3” set for each item respectively, then calling the `nextSibling` property on the first item will return the second item that has the value “Item 2”.

Note: calling this property can return the next sibling no-matter if it’s an Element-node, Text-node, or Comment-node, etc. But if we want to get the next sibling of a node that should be an Element-node, we can then use nextElementSibling property instead.

JavaScript nextSibling Property Syntax:

element.nextSibling;

JavaScript nextSibling Property Input Value

This property is read-only and so we can’t assign a value to it.

JavaScript nextSibling Property Return Value

The return value of this property is a reference to a node that is the next sibling of the current node that invoked this property.

Note: if there’s no sibling, the return value of this property will be null.

Example: using nextSibling in JavaScript

See the Pen using nextSibling in JavaScript by Omid Dehghan (@odchan1) on CodePen.