Updating html text data from jquery

Question

Suppose I have this:

<li id="0">
  <i class="abc"></i>
  TEST TEXT
</li>

How could I update "TEST TEXT" with some other string? Using $("#0").text('NEW TEXT') removes the i-tag.

Answer 1

You can do:

$('#0').find('i')[0].nextSibling.nodeValue = 'NEW TEXT';

or since it is the last child then:

$('#0')[0].lastChild.nodeValue = 'NEW TEXT'; //you can just use document.getElementById

or

document.getElementById('0').lastChild.nodeValue = 'NEW TEXT';

Answer 2

wrap the "test text" in a span, and replace that.

<li id="0">
  <i class="abc"></i>
  <span id="replaceme">TEST TEXT</span>
</li>

$("#replaceme").text('NEW TEXT')

Answer 3

This should do the trick:

$("#0").text(function() {
    $(this).children().html() + "NEW TEXT");
});