javascript基础从小白到高手系列一百三十六：范围插入

完美句号

于 2024-03-24 10:03:35 发布

阅读量279

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/136982934

版权

本文介绍了如何使用JavaScript的RangeAPI在HTML中插入新节点，如`insertNode()`方法用于在选区开始位置插入节点，以及`surroundContents()`方法用于包围并高亮选定内容。注意事项包括确保范围完整且操作对象正确，避免处理Document等特殊类型的节点。

摘要由CSDN通过智能技术生成

上一节介绍了移除和复制范围的内容，本节来看一看怎么向范围中插入内容。使用insertNode()
方法可以在范围选区的开始位置插入一个节点。例如，假设我们想在前面例子中的HTML中插入如下HTML：
Inserted text
可以使用下列代码：
let p1 = document.getElementById(“p1”),
helloNode = p1.firstChild.firstChild,
worldNode = p1.lastChild,
range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
let span = document.createElement(“span”);
span.style.color = “red”;
span.appendChild(document.createTextNode(“Inserted text”));
range.insertNode(span);
运行上面的代码会得到如下HTML 代码：

HeInserted textllo world

注意，正好插入到"Hello"中的"llo"之前，也就是范围选区的前面。同时，也要注意原始的HTML 并没有添加或删除元素，因为这里并没有使用之前提到的方法。使用这个技术可以插入有用的信息，比如在外部链接旁边插入一个小图标。除了向范围中插入内容，还可以使用surroundContents()方法插入包含范围的内容。这个方法接收一个参数，即包含范围内容的节点。调用这个方法时，后台会执行如下操作： (1) 提取出范围的内容； (2) 在原始文档中范围之前所在的位置插入给定的节点； (3) 将范围对应文档片段的内容添加到给定节点。这种功能适合在网页中高亮显示某些关键词，比如： let p1 = document.getElementById("p1"), helloNode = p1.firstChild.firstChild, worldNode = p1.lastChild, range = document.createRange(); range.selectNode(helloNode); let span = document.createElement("span"); span.style.backgroundColor = "yellow"; range.surroundContents(span); 执行以上代码会以黄色背景高亮显示范围选择的文本。得到的HTML 如下所示：

Hello world!

为了插入元素，范围中必须包含完整的DOM 结构。如果范围中包含部分选择的非文节点，这个操作会失败并报错。另外，如果给定的节点是Document、DocumentType 或DocumentFragment 类型，也会导致抛出错误。