Range: extractContents() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

Range.extractContents() は Range の内容をこの文書ツリーから DocumentFragment へ移動させます。

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

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

構文

extractContents()

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

コンテナー間でアイテムを移動

この例では、 2 つのコンテナー間でアイテムを移動させます。 1 つ以上のアイテムを選択しをクリックすると、反対側のコンテナーに移動されます。

HTML

html

<p id="list1">123456</p>
<button id="swap">選択されたアイテムを入れ替え</button>
<p id="list2">abcdef</p>

CSS

css

body {
 pointer-events: none;
}
p {
 border: 1px solid;
 font-size: 2em;
 padding: 0.3em;
}
button {
 font-size: 1.2em;
 padding: 0.5em;
 pointer-events: auto;
}

JavaScript

const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");
const button = document.getElementById("swap");
button.addEventListener("click", (e) => {
 selection = window.getSelection();
 for (let i = 0; i < selection.rangeCount; i++) {
 const range = selection.getRangeAt(i);
 if (
 range.commonAncestorContainer === list1 ||
 range.commonAncestorContainer.parentNode === list1
 ) {
 const documentFragment = range.extractContents();
 list2.appendChild(documentFragment);
 } else if (
 range.commonAncestorContainer === list2 ||
 range.commonAncestorContainer.parentNode === list2
 ) {
 const documentFragment = range.extractContents();
 list1.appendChild(documentFragment);
 }
 }
});