javascript - 更改文本节点文本

Question

如何更改文本节点文本？

HTML：

<p class='theClass'> bbb <a href=#> foo</a> aaa </p>

我正在尝试将 'aaa' 和 'bbb' 更改为hello world. 我成功选择了这些节点，但无法更改它们的文本。

到目前为止的jQuery：

var $textNodes = $('.theClass').contents().filter(function() {
    return this.nodeType == Node.TEXT_NODE;
});

JSFiddle

我该怎么做$textNodes才能改变他们的文字？

Answer 1

使用文本节点的nodeValueordata属性。两者同样有效且得到很好的支持：

$textNodes.each(function() {
    this.data = "CHANGED";
});

顺便说一句，Node.TEXT_NODE在 IE < 9 中不存在，所以你最好简单地使用它3。

Answer 2

您不能使用 jQuery 直接编辑文本节点。

只需在节点上直接使用本机data或属性。nodeValue

$textNodes.each(function() {
    this.data = "Hello world";
 // this.nodeValue = "Hello world";
});

jsFiddle

Answer 3

在MDN找了很久才找到：

这个属性被称为nodeValue不是value出于某种愚蠢的原因......

固定的jQuery：

var $textNodes = $('.theClass').contents().filter(function() {
    return this.nodeType == Node.TEXT_NODE;
}).each(function(){
    this.nodeValue = "hello World";
});

修复了 JSFiddle