Insert HTML as last child of selected tag using jQuery

I am new to jQuery. I read jQuery in action, but only until page 39 and need quick help!

Please note: I simplify my actual requirement, so what I ask may seem strange, but I'm just trying to understand the essence of the JQuery expression, not my situation (related to the animation plugin).

I have HTML code (which is generated and I don't want to change):

<div class="favorite">
   <div>
          <a href='http://www.stackoverflow.com'>Stackoverflow</a>
   </div>
</div>

Now that I want to do this, insert the text “(favorite)” INSIDE tag A after the current content. Or, in other words, as the last child <a>.

<div class="favorite">
   <div>
          <a href='http://www.stackoverflow.com'>Stackoverflow (favorite)</a>
   </div>
</div>

The best I have so far:

$('<span> (favorite)</span>').insertAfter('.favorite div a');

Of course, this ends with the (favorite) OUTSIDE text having the A link, and this will not be underlined (what I want).

- .parent(). lastChild(), , .

. <span>, "" . , , .

+3
2

append . Prepend .

:

$('div.favorite div a').append('<span> (favorite)</span>');

span - :

$('div.favorite div a').append(' (favorite)');
+8

:

$("div.favorite div a").text($("div.favorite div a").text() + " (favorite)");
+1

All Articles