JavaScript Element nextElementSibling Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property

Definition

Element.nextElementSibling is a read-only property that returns the next sibling Element in the parent’s children list, or null if none (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.nextElementSibling. Start with this line.

JavaScript
element.nextElementSibling
CallWhat it does
element.nextElementSiblingPrimary signature.

Built into the browser. Read or assign el.nextElementSibling — no import required.

Library declarations
JavaScript
element.nextElementSibling

Parameters

ParameterDescription
Starting elementRequired. Current position in the sibling list
LoopOptional. Visit every following element sibling

Return Value

Return ValueDescription
*Element or null

JavaScript Examples

Example 1 — Read the Next Element Sibling

Step from one div to the next (MDN shape).

JavaScript
const first = document.getElementById("div-01");
const next = first.nextElementSibling;

console.log(next.id);
// "div-02"
Try It Yourself

How It Works

  1. Start at div-01. That is your current element.
  2. Read nextElementSibling. You get the following element sibling.
  3. Read its id. Here that is "div-02".
  4. If it were last, the property would be null.

Example 2 — nextElementSibling vs nextSibling

Whitespace between tags makes nextSibling a text node.

JavaScript
const a = document.getElementById("a");
// <span id="a">A</span>\\n<span id="b">B</span>

console.log(a.nextSibling.nodeName);           // "#text"
console.log(a.nextElementSibling.tagName);     // "SPAN"
console.log(a.nextElementSibling.textContent); // "B"
Try It Yourself

How It Works

  1. Pretty HTML adds text. A newline between tags is a text node.
  2. nextSibling sees that text. nodeName is "#text".
  3. nextElementSibling skips it. You get the next <span>.
  4. Rule of thumb. Want an element? Prefer nextElementSibling.

Example 3 — Walk Following Siblings

Loop with nextElementSibling until null (MDN pattern).

JavaScript
let el = document.getElementById("a").nextElementSibling;

while (el) {
  console.log(el.textContent);
  el = el.nextElementSibling;
}
// "B"
// "C"
Try It Yourself

How It Works

  1. Start after A. First value is A’s next element sibling (B).
  2. Loop while truthy. null ends the walk.
  3. Visit each node. Log text (or do other work).
  4. Advance. el = el.nextElementSibling moves one step forward.

Browser Support

Element.nextElementSibling is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.

✓ Baseline · Widely available

Element.nextElementSibling

Read-only next sibling Element or null — skips text and comments between tags.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
nextElementSibling Excellent

Bottom line: Safe for production. Prefer it over nextSibling whenever you specifically need an Element sibling.

Frequently Asked Questions

The element immediately after the current one in the parent's children list, or null if there is no following element sibling.
No. MDN marks Element.nextElementSibling as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
nextSibling returns the next node of any type (element, text, comment). nextElementSibling skips non-elements and returns only the next Element.
It returns null when the current element is already the last element sibling.
Yes. Walk across element siblings by reading nextElementSibling repeatedly in a loop or step by step.
Yes. It is for navigation only — you cannot assign a different sibling to it.

Next: outerHTML

Learn how to get and set an element’s HTML including the element itself.

outerHTML tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

11 people found this page helpful