MutationRecord: previousSibling property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The MutationRecord read-only property previousSibling is the previous sibling of an added or removed child node of the target of a MutationObserver.

Value

If a node is added to or removed from the target of a MutationObserver, the value is the Node that is the previous sibling of the added or removed node: that is, the node immediately before this one in the parent's childNodes list.

The value is null if there are no added or removed nodes, or if the node is the first child of its parent.

Examples

Log the previous sibling of a mutation

This adds a node every time you click the button. Then the observer logs the textContent of the previousSibling of the added node.

HTML

html
<button id="add-nodes">Add a node</button>
<button id="reset">Reset</button>

<pre id="log" class="log">Previous sibling of added node:</pre>
<div id="target"><p>Node #0</p></div>

JavaScript

js
const addNodes = document.querySelector("#add-nodes");
const reset = document.querySelector("#reset");
const target = document.querySelector("#target");
let nodeNumber = 1;

addNodes.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Node #${nodeNumber}`;
  nodeNumber++;
  target.appendChild(newPara);
});

reset.addEventListener("click", () => self.location.reload());

function logPreviousSibling(records) {
  for (const record of records) {
    if (record.type === "childList") {
      for (const newNode of record.addedNodes) {
        log.textContent = `Previous sibling of added node: ${newNode.previousSibling?.textContent}`;
      }
    }
  }
}

const observer = new MutationObserver(logPreviousSibling);
observer.observe(target, { childList: true });

Result

Specifications

Specification
DOM
# ref-for-dom-mutationrecord-previoussibling②

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
previousSibling

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support