如何修改文本节点的 HTML（类型 3）/如何将其包装在 HTML 跨度中

Question

找到文本节点 (nodeType = 3) 时，如何修改其 HTML？

从某种意义上说，假设文本节点的值（数据或文本内容）是 This is textual content，如何用 HTML 包围它 - 比如说一个粗体标签...使其 This是文本内容。

更改 textContent 也会写出 HTML 标记 - 这是文本内容

如何使其呈现为 This是文本内容。

JavaScript / Jquery

Answer 1

你的问题看起来相当原始的 DOM，但你提到了 jQuery。

原始 DOM 内容：

您可以创建 b 元素，将其插入到文本节点之前，然后将文本节点移动到其中 (实时示例）：

function wrapNode(textNode, tagName) {
    var wrapper = document.createElement(tagName);
    textNode.parentNode.insertBefore(wrapper, textNode);
    wrapper.appendChild(textNode);
    return wrapper;
}

另一种方法是操作文本节点父 Element 的 innerHTML 属性，但如果您这样做，请注意您以这种方式更新的任何后代元素都是替换（因此新的不会有事件处理程序等附加到旧的）。

进一步阅读：

• DOM2 Core 规范 - 得到广泛支持
• DOM2 HTML 规范 - 得到广泛支持
• DOM3 核心规范 - 大部分受支持，但您需要对某些内容进行功能检测
• HTML5 DOM 接口 - 支持各不相同

jQuery：

jQuery 大多数情况下不会为您提供原始文本节点，它更多的是 Element-专注。但是您可能会查看其 wrap，wrapAll 和 wrapInner 函数。 wrapInner 可能最接近您想要的（实时示例）：

$(parent_element_selector).click(function() {
  $(this).wrapInner("<b>").unbind("click");
});

Answer 2

使用 $(selector).html('Something here');

或

在 CSS 中创建一个类，然后使用 addClass(); 来文本的父级

Answer 3

通过 jQuery，您可以使用 .wrapInner() 在某些文本周围添加标签。例如，对于以下 HTML

<span>Text goes here</span>

您可以使用以下 jQuery 代码添加 标记

$('span').wrapInner('<b>');

这将产生以下 HTML：

<span><b>Text goes here</b></span>

Answer 4

您也可以这样尝试：

HTML

<div id="test">
    This is textual content
</div>

JavaScript

$('#test').wrapInner('<strong>');

它将用 strong 标记包围 #test 内的所有内容。

Answer 5

为了扩展 TJ 的答案以更好地满足 OP 的要求，不能在循环内调用所提供的函数（循环通过节点）。

就我个人而言，我必须将所有直接文本节点转换为跨度，就像OP暗示的那样（通过引用nodeType==3）。

问题是，当转换循环内的节点时，它会抛出索引！下面是一些微调代码，可将所有文本节点转换为包装节点（优化）：

for(var txtnodes=[],nodes=XXXX.childNodes,i=0,j=nodes.length;i<j;i++) {
 if(nodes[i].nodeType==3) txtnodes[txtnodes.length] = nodes[i];
}
for(var m=0,n=txtnodes.length;m<n;m++) {
 var span = document.createElement('span');
 pg.insertBefore(span,txtnodes[m]);
 span.appendChild(txtnodes[m]);
}

该函数有效地“保存它们供以后使用”并在事后转换它们。变量声明都是压缩和内联的，所有循环都针对长节点树进行了优化。

Google 上没有任何其他关于此主题的文章，祝未来的冒险家们编码愉快。