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 July 2015.

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

浏览器兼容性

参见