jQuery selector question

Question

I need to append some HTML so that this

<div id="table_div">
    <h1>
        <font color="grey">
            <span>spend</span>
        </font>
    </h1>           
</div>

becomes this

<div id="table_div">
    <h1>
        <font color="grey">
            <span>spend</span>
            <span>new word</span>
        </font>
    </h1>           
</div>

There are multiples of these divs, all with different div IDs, so the selector has to begin with the div id. How can I write a selector to do this?

Answer 1

If you want to narrowly target the particular font element (in case you have more than one)

$("#table_div h1 font[color=gray]").append("<span>new world</span>")

Answer 2

This will append to the font element, just as you described what you wanted:

$("#table_div font").append("<span>new word</span>");

Here's an example on jsFiddle: http://jsfiddle.net/PZEDG/

Answer 3

Give this a go. The .after function appends the content after any matching elements (see http://api.jquery.com/after/)

$("#table_div span:last").after("<span>new word</span>");