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 css-tricks.com/ids-cannot-start-with-a-number — Ollie
– Ollie, Commented Oct 8, 2013 at 20:46
@Ollie, ID's starting with numbers is ok in HTML5 - stackoverflow.com/questions/70579/… — Sergio
– Sergio, Commented Oct 8, 2013 at 20:48
@Sergio: this is absolutely true, they are, however, still a pain to select in CSS. — David Thomas
– David Thomas, Commented Oct 8, 2013 at 20:53

PSL · Accepted Answer · 2013-10-08 21:25:11Z

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

answered Oct 8, 2013 at 20:48

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nebulae · Accepted Answer · 2013-10-08 20:49:13Z

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 8, 2013 at 20:49

nebulae

2,6651 gold badge20 silver badges16 bronze badges

Fabricio · Accepted Answer · 2013-10-08 21:13:59Z

0

This should do the trick:

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

answered Oct 8, 2013 at 21:13

Fabricio

84110 silver badges22 bronze badges