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.

You could probably start by not adding an ID that stars with a number http://css-tricks.com/ids-cannot-start-with-a-number/ — Ollie, Oct 08 '13 at 20:46
@Ollie, ID's starting with numbers is ok in HTML5 - http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html/18453687#18453687 — Sergio, Oct 08 '13 at 20:48
@Sergio: this is absolutely true, they are, however, still a pain to select in CSS. — David Thomas, Oct 08 '13 at 20:53

PSL · Accepted Answer · 2013-10-08T21:25:11.243

3

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';

edited Oct 08 '13 at 21:25

answered Oct 08 '13 at 20:48

PSL

score 1 · Answer 2 · answered Oct 08 '13 at 20:49

1

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')

answered Oct 08 '13 at 20:49

nebulae

score 0 · Answer 3 · answered Oct 08 '13 at 21:13

0

This should do the trick:

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

answered Oct 08 '13 at 21:13

Fabricio

3 Answers3