📌  相关文章
📜  HTML DOM Range extractContents() 方法(1)

📅  最后修改于: 2023-12-03 15:31:10.507000             🧑  作者: Mango

HTML DOM Range extractContents() 方法

HTML DOM Range extractContents() 方法用于从当前 Range 对象表示的文档树种移除并返回一个包含选中节点的文档片段。

语法
range.extractContents()
返回值

该方法返回一个文档片段对象，其中包含了被选中的节点。

示例

以下示例演示了如何使用 extractContents() 方法：

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to extract the contents of the paragraph.</p>

<button onclick="myFunction()">Extract Contents</button>

<script>
function myFunction() {
  var demo = document.getElementById("demo");
  var range = document.createRange();
  range.selectNodeContents(demo);
  var fragment = range.extractContents();
  document.body.appendChild(fragment);
}
</script>

</body>
</html>

这个示例中，当用户点击 Extract Contents 按钮时，指定的段落将被移除，并作为文档片段返回并附加到文档树中。

注意事项

extractContents() 方法从文档树中删除了选定范围内的元素，因此要慎重使用。如果需要保持选定范围内的元素，可以使用 cloneContents() 方法代替。该方法只是复制选定范围内的元素，并不会删除它们。