Chrome扩展中如何向文本节点插入HTML元素？

你不能直接通过修改文本节点的nodeValue来插入HTML元素——因为nodeValue只支持纯文本，浏览器不会解析其中的HTML标签。正确的做法是拆分原文本节点，插入实际的DOM元素节点，重新拼接结构。

方法一：使用原生splitText拆分文本节点（推荐） #

这种方法更高效，直接操作原生DOM节点：

$('body :not(script)').contents().filter(function () {
  return this.nodeType === 3;
}).each(function () {
  const textNode = this;
  const targetText = '你好';
  const targetIndex = textNode.nodeValue.indexOf(targetText);

  if (targetIndex !== -1) {
    // 拆分出目标文本之后的部分
    const afterTextNode = textNode.splitText(targetIndex + targetText.length);
    // 拆分出目标文本本身
    const targetTextNode = textNode.splitText(targetIndex);

    // 创建Translate按钮
    const translateBtn = document.createElement('button');
    translateBtn.textContent = 'Translate';

    // 在目标文本节点后面插入按钮
    targetTextNode.parentNode.insertBefore(translateBtn, afterTextNode);
  }
});

步骤说明： #

1. 用indexOf找到目标文本在节点中的位置；
2. 调用splitText把原文本节点拆成三个部分：目标前文本、目标文本、目标后文本；
3. 创建按钮元素，插入到目标文本节点和后半段文本节点之间。

方法二：拆分文本后重新插入节点 #

如果更习惯用jQuery的方法，也可以这样实现：

$('body :not(script)').contents().filter(function () {
  return this.nodeType === 3;
}).each(function () {
  const originalText = this.nodeValue;
  const targetText = '你好';

  if (originalText.includes(targetText)) {
    const textParts = originalText.split(targetText);
    const parentEl = this.parentNode;
    
    // 删除原文本节点
    $(this).remove();

    // 插入前半段文本（如果不为空）
    if (textParts[0]) {
      parentEl.append(document.createTextNode(textParts[0]));
    }
    // 插入目标文本
    parentEl.append(document.createTextNode(targetText));
    // 插入按钮
    parentEl.append('<button>Translate</button>');
    // 插入后半段文本（如果不为空）
    if (textParts[1]) {
      parentEl.append(document.createTextNode(textParts[1]));
    }
  }
});

步骤说明： #

1. 把原文本按目标文本拆分成数组；
2. 删除原文本节点，依次插入拆分后的文本片段和按钮元素。

内容的提问来源于stack exchange，提问作者east_laugh