Question

I am new to JQuery. I’m reading JQuery in action, but only up to page 39 and need some quick help!

Please note: I’m simplifying my actual requirement, so what I’m asking for may sound odd but I’m just tryin to get to the crux of the JQuery expression and not my situation (related to an animation plugin).

I have my HTML code (which is generated and I dont want to change) :

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

Now that I want to do is insert the text ‘(favorite)’ INSIDE the A tag after the current contents. Or in other words as the last child of the <a>.

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

The best I have so far is this :

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

Of course this ends up putting the (favorite) text OUTSIDE the A link and it wont be underlined (which I want).

I need to somehow say .parent().lastChild() but I’m not quite sure how to do that.

Note: I had to put <span> in because otherwise it didnt see it as ‘insertable’ text. I’m sure there a way around that too but thats a secondary concern.

Answer 1

The append method inserts nodes at the end of match elements. Prepend inserts nodes at the beginning.

Example:

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

The span element isn’t necessary – you can just do this:

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