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

在查找文本节点（nodeType=3）时，如何修改其HTML

从某种意义上说，假设文本节点的值（数据或文本内容）是

这是文本内容

，如何用HTML包围它-比如说一个粗体标记…使其

这是文本内容

更改

textContent

也会写出HTML标记-

这是文本内容

如何使其呈现为

这是文本内容

---

Javascript/Jquery

您的问题看起来相当原始，但您提到了Jquery

原始DOM内容： 您可以创建

b

元素，将其插入文本节点之前，然后将文本节点移动到其中（）：

另一种方法是操纵文本节点的父元素

元素
的
innerHTML
属性，但如果这样做，请注意以这种方式更新的所有子元素都将被替换（因此新的子元素将不会有事件处理程序，也不会将这些子元素附加到旧的子元素）

进一步阅读：


-得到广泛支持
-得到广泛支持
-大部分支持，但您需要检测某些功能
-支持各不相同

jQuery：
jQuery基本上不提供原始文本节点，它更关注
元素
。但是你可以看看它的功能
wrapInner
可能最接近您想要的内容（）：

$（父元素选择器）。单击（函数（）{
$（this.wrapInner（“”）。解除绑定（“单击”）；
});
使用
$（选择器）.html（“此处某物””）

或

在CSS中创建一个类，然后使用
addClass（）
到文本的父级
使用jQuery，您可以使用
.wrapInner（）
在某些文本周围添加标记。例如，使用以下HTML

<span>Text goes here</span>

文本在此显示

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

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

$（'span'）.wrapInner（''）；

这将生成以下HTML：

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

文本在此显示
您也可以这样尝试：

HTML


这是文本内容

JavaScript

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

$（“#测试”）.wrapInner（“”）；

这将用一个
strong
标记围绕
#test
中的所有内容。
为了扩展T.J的答案以更好地满足OP的要求，提供的函数不能在循环中调用（通过节点循环）

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

问题在于，当转换循环中的节点时，会抛出索引这里有一些经过微调的代码，可以将所有文本节点转换为包装节点（优化）：

for（var txtnodes=[]，nodes=XXXX.childNodes，i=0，j=nodes.length；iThanks TJ！非常感谢您的详细解释。@SaM：不用担心，很高兴有帮助！您的函数不能在一个循环内调用！让我大吃一惊。我将微调扩展到了一个答案，请查看
<span><b>Text goes here</b></span>

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

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

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]);
}