1. 開発者向けのウェブ技術
  2. Web API
  3. Range
  4. surroundContents()

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Range: surroundContents() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

Range.surroundContents() メソッドは Range の内容を新しいノードに移動し、新しいノードを指定された範囲の先頭に配置します。

このメソッドは newNode.appendChild(range.extractContents()); range.insertNode(newNode) とほぼ同じです。 囲んだ後の range の境界点は newNode を含みます。

ただし、Range がText でないノードをその境界点の 1 つだけで分割した場合は例外が発生します。つまり、上記の代案とは異なり、部分的に選択されたノードがある場合、それらのノードは複製されず、代わりに処理が失敗します。

構文

js
surroundContents(newParent)

引数

newParent

コンテンツを囲むNode です。

返値

なし (undefined)。

例

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);

結果

仕様書

仕様書
DOM
# dom-range-surroundcontents

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告