Range: surroundContents() method

Baseline Widely available

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

The Range.surroundContents() method moves content of the Range into a new node, placing the new node at the start of the specified range.

This method is nearly equivalent to newNode.appendChild(range.extractContents()); range.insertNode(newNode). After surrounding, the boundary points of the range include newNode.

An exception will be thrown, however, if the Range splits a non-Text node with only one of its boundary points. That is, unlike the alternative above, if there are partially selected nodes, they will not be cloned and instead the operation will fail.

Syntax

js
surroundContents(newParent)

Parameters

newParent

A Node with which to surround the contents.

Return value

None (undefined).

Examples

HTML

html
<span class="header-text">Put this in a headline</span>

JavaScript

js
const range = document.createRange();
const newParent = document.createElement("h1");

range.selectNode(document.querySelector(".header-text"));
range.surroundContents(newParent);

Result

Specifications

Specification
DOM Standard
# dom-range-surroundcontents

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
surroundContents

Legend

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

Full support
Full support

See also