HTML DOM Range insertNode() 方法

insertNode() 方法是HTML DOM Range对象的一个方法，它用于将一个节点插入到Range对象的起始位置。

语法

range.insertNode(node);

参数

• node：要插入的节点对象。

描述

insertNode() 方法将指定的节点插入到Range对象的起始位置。插入节点后，Range对象的起始位置将变为新插入节点。

插入节点时，如果Range对象有选中的内容，插入节点将替换掉原有的选中内容。如果Range对象是空的，插入节点将成为Range对象的全部内容。

示例

// 创建新的节点
var newNode = document.createElement("p");
newNode.innerHTML = "New paragraph";

// 获取Range对象
var range = window.getSelection().getRangeAt(0);

// 在Range对象的起始位置插入节点
range.insertNode(newNode);

在上述示例中，我们首先创建了一个新的<p>元素节点，并设置其内容为"New paragraph"。 然后，我们获取页面上的选中内容所在的Range对象。 最后，我们使用insertNode()方法将新节点插入到Range对象的起始位置。

请注意，如果Range对象有选中的内容，使用insertNode()方法将替换掉原有的选中内容。如果Range对象是空的，使用该方法将直接插入节点作为Range对象的全部内容。

浏览器兼容性

insertNode()方法在主流的现代浏览器（如Chrome、Firefox、Safari、Edge等）中都得到了良好的支持，并可跨浏览器使用。

参考链接

• MDN web docs: Range.insertNode()