Изменить текстовые узлы текста

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

Используйте свойство nodeValue или data текстового узла. Оба одинаково действительны и хорошо поддерживаются:

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

Между прочим, Node.TEXT_NODE не существует в IE <9, поэтому вам лучше просто использовать <code>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