range.insertNode（）未按预期插入文本节点

Question

我正在创建Chrome扩展程序。基本上，如果用户单击内容菜单选项，我想在所选文本之前和之后插入HTML格式标记。

标记被添加到事件页面中，在添加格式标记之后，将新值触发到消息对象的“粘贴”键中的内容脚本。

我的内容脚本的代码如下：

chrome.runtime.onMessage.addListener(handleRequest)

function handleRequest(message, sender)
{
    if (message.paste!==undefined) 
    {
        var newNode = document.createTextNode('');
        newNode.innerHTML=message.paste;   

        var cursor = window.getSelection().getRangeAt(0);       
        cursor.deleteContents();     
        cursor.insertNode(newNode);    
        alert(newNode.innerHTML);       
    }
}

我认为我这样做是正确的，因为根据this

  

如果要将新节点添加到文本节点，则该节点将在插入点处拆分，并且插入将在两个文本节点之间进行。

但是，单击上下文菜单选项的结果只是删除所选的任何文本。永远不会添加新文本，但不会向控制台打印错误。

我知道这对于输入元素或文本区域中的内容不起作用，现在我只是试图让它在页面上的常规文本上工作。

警报弹出窗口的内容正如预期的那样，是格式化标签中包含的选定文本。

有人可以解释我做错了什么吗？我不应该编辑文本节点的HTML吗？是否有一些我遗漏的最后一步才能显示文字？

错误演示：

如果我突出显示此问题的标题，则会出现以下警告框（我点击了删除线选项）。请注意，标题已从页面中消失。

Answer 1

document.createTextNode（＆＃39;＆＃39;）创建的对象没有innerHTML属性。如果要替换其内容，可以执行以下操作：

var newNode = document.createTextNode('');
newNode.replaceWholeText(message.paste);

如果您正在使用HTML内容进行渲染，看起来它可能会破坏渲染，因此您要么必须获取父容器并直接编辑其innerHTML，要么将新节点包装起来如果合适，某种元素如下：

var newNode = document.createElement('b');
newNode.innerHTML = message.paste;