DHTML: Range.extractContents メソッド  編集:2022.01.10 by T.A.

Range の中身をドキュメント・ツリーから DocumentFragment に移動→MS(en)

DOM イベントを使用して追加されたイベント・リスナーは、抽出中に保持されません。HTML 属性イベントは、Node.cloneNode() メソッドの場合と同様に保持または複製されます。HTML ID 属性も複製されるため、部分的に選択されたノードが抽出されてドキュメントに追加されると、ドキュメントが無効になる可能性があります。

部分的に選択されたノードは、ドキュメント・フラグメントを有効にするために必要な親タグを含めるために複製されます。

documentFragment = range.extractContents()
range
Range
documentFragment
DocumentFragment
var range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
var documentFragment = range.extractContents();
document.body.appendChild(documentFragment);

テスト
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: