Range の中身を新しい Node の中に移動。→MS（en）

このメソッドは、
newNode.appendChild(range.extractContents()); range.insertNode(newNode)
とほぼ同等です。囲んだ後、範囲の境界点には newNode が含まれます。

ただし、Range が非 Text ノードをその境界点の 1 つだけで分割する場合、例外がスローされます。つまり、上記の代替方法とは異なり、部分的に選択されたノードがある場合、それらは複製されず、代わりに操作が失敗します。

パラメーター

range

Range。

newParent

内容を囲む Node。

例

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

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

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

テスト