js range

// 创建一个 Range 对象并使用它来操作 DOM

// 创建一个新的 Range 对象
let range = document.createRange();

// 选择文档中的某个节点，例如第一个 <p> 元素
let paragraph = document.querySelector('p');

// 将 Range 的起点和终点设置为整个 <p> 元素的内容
range.selectNode(paragraph);

// 使用 Range 对象创建一个新的 DocumentFragment
let fragment = range.cloneContents();

// 创建一个新的 <div> 元素
let newDiv = document.createElement('div');

// 将 DocumentFragment 插入到新的 <div> 中
newDiv.appendChild(fragment);

// 将新的 <div> 添加到文档的 body 中
document.body.appendChild(newDiv);

// 解释：
// 1. `document.createRange()`：创建一个新的 Range 对象。
// 2. `range.selectNode(paragraph)`：将 Range 的起点和终点设置为整个 <p> 元素的内容。
// 3. `range.cloneContents()`：复制 Range 内的所有内容，并返回一个 DocumentFragment。
// 4. `newDiv.appendChild(fragment)`：将复制的内容插入到新的 <div> 中。
// 5. `document.body.appendChild(newDiv)`：将新的 <div> 添加到文档的 body 中。