Question

I have a div

<div id="imgDIV"><h4>My Debug DIV</h4></div>

and I want insert a debug message at the top of the div but after the first h4, this way I get my latest messages at the top.

$('My Debug Messages').insertAfter(the first `h4` of the DIV);

but can not get the syntax right to refer to the h4.

I have given the h4 an ID which works, but would like to know the correct syntax for specifying the first h4 in a div.

Answer 1

The selector to use is:

.insertAfter('#imgDIV h4:first-child')

If you want to insert a string of plain text, you can’t $() the text alone as jQuery will treat it like a selector; you’ll need to wrap the text in an HTML element and then append that. For example, a p:

$('<p>My Debug Messages</p>').insertAfter('#imgDIV h4:first-child')

Which results in:

<div id="imgDIV"><h4>My Debug DIV</h4><p>My Debug Messages</p></div>