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
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 # dom-range-surroundcontents |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
surroundContents | ||||||||||||