JavaScript Element previousElementSibling Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word PREVIOUSELEMENTSIBLING

Definition

Element.previousElementSibling is a read-only property that returns the previous 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.previousElementSibling. Start with this line.

JavaScript
element.previousElementSibling
CallWhat it does
element.previousElementSiblingPrimary signature.

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

Library declarations
JavaScript
element.previousElementSibling

Parameters

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

Return Value

Return ValueDescription
*Element or null

JavaScript Examples

Example 1 — Read the Previous Element Sibling

Step from the second div back to the first.

JavaScript
const second = document.getElementById("div-02");
const prev = second.previousElementSibling;

console.log(prev.id);
// "div-01"
Try It Yourself

How It Works

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

Example 2 — previousElementSibling vs previousSibling

Whitespace between tags makes previousSibling a text node.

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

console.log(b.previousSibling.nodeName);           // "#text"
console.log(b.previousElementSibling.tagName);     // "SPAN"
console.log(b.previousElementSibling.textContent); // "A"
Try It Yourself

How It Works

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

Example 3 — Walk Preceding Siblings

Loop with previousElementSibling until null (MDN pattern).

JavaScript
let el = document.getElementById("c").previousElementSibling;

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

How It Works

  1. Start before C. First value is C’s previous 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.previousElementSibling moves one step backward.
Compatibility

Browser Support

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

✓ Baseline · Widely available

Element.previousElementSibling

Read-only previous 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
previousElementSibling Excellent

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

Frequently Asked Questions

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

Next: role

Learn how to get and set an element’s ARIA role string.

role 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.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element prefix Property JavaScript Element role Property