Range: extractContents() 方法

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

extractContents() 方法是 Range 介面的一個方法，它類似於 Range.cloneContents() 和 Range.deleteContents() 的組合。它會從文件中移除 range 的子 Node，克隆它們，並將它們作為新的 DocumentFragment 物件返回。對於部分選中的節點，只會刪除選中的文字，但包含這些文字的所有父節點（直到公共祖先節點）也會被克隆，從而導致這些節點產生兩份副本：一份在原始文件中，一份在提取的片段中。

語法

extractContents()

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

在容器之間移動專案

此示例允許您在兩個容器之間移動專案。選擇一個或多個專案，然後點選“交換”按鈕將它們移動到相反的容器。

HTML

html

<p id="list1">123456</p>
<button id="swap">Swap selected item(s)</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) => {
  const 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);
    }
  }
});