Question

Supposing I have this HTML:

<div id="mydiv">
<p>
<span>My first span</span>
</p>
<p>
<span>My second span</span>
</p>
<p>
<span>My third span</span>
</p>

My problem is that I’m appending HTML to the p tags:

$('#mydiv p').append('<img src="http://example.com/myimage.png">');

But I only want to append to the second p with the span tag text “My second span” (or any other p tags with their respective span text depending on my application). so this is the resulting HTML after appending:

<p>
<span>My second span</span><img src="http://example.com/myimage.png">
</p>

One limitation is that I cannot edit the original HTML sourcecode so I cannot assign class or ID selectors to them.

How would I revise my jQuery selectors to target a specific p with the specific span text? Thanks for any tips.

Answer 1

You can achieve this with the :contains() selector.

$("#mydiv span:contains('My second span')")