范围：extractContents() 方法

Range.extractContents() 方法将 Range 的内容从文档树移动到 DocumentFragment 中。

使用 DOM 事件添加的事件监听器在提取过程中不会保留。HTML 属性事件会保留或复制，就像在 Node.cloneNode() 方法中一样。HTML id 属性也会被克隆，如果提取部分选定的节点并将其附加到文档中，会导致文档无效。

部分选定的节点将被克隆，以包含使文档片段有效的父标签。

语法

extractContents()

参数

无。

返回值

一个 DocumentFragment 对象。

示例

基本示例

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

结果

规范

规范
DOM 标准 # dom-range-extractcontents

浏览器兼容性

BCD 表仅在启用了 JavaScript 的浏览器中加载。

另请参阅

DOM 接口索引