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