Range:surroundContents() 方法

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.

Range.surroundContents() 方法将 Range 的内容移动到一个新节点,并将该新节点放置在范围所指定的起始位置。

此方法几乎等同于 newNode.appendChild(range.extractContents()); range.insertNode(newNode)。在包围操作之后,range 的边界点将包含 newNode

如果 Range 只用其中一个边界点分割了一个非 Text 节点,则会抛出异常。也就是说,与上述方案不同的是,如果有部分节点被选中,它们将不会被克隆,相反,操作会失败。

语法

js
surroundContents(newParent)

参数

newParent

用于包围内容的 Node

返回值

无(undefined)。

示例

HTML

html
<span class="header-text">在标题中写道</span>

JavaScript

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

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

结果

规范

Specification
DOM
# dom-range-surroundcontents

浏览器兼容性

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

参见