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
range.surroundContents(newParent);
Parameters
newParent
- A
Node
with which to surround the contents.
Example
HTML
<span class="header-text">Put this in a headline</span>
JavaScript
const range = document.createRange(); const newParent = document.createElement('h1'); range.selectNode(document.querySelector('.header-text')); range.surroundContents(newParent);
Result
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'Range.surroundContents()' in that specification. |
Living Standard | No change. |
Document Object Model (DOM) Level 2 Traversal and Range Specification The definition of 'Range.surroundContents()' in that specification. |
Obsolete | Initial specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
surroundContents | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support