Question

Im looking to dynamically add some content to container after a certain tag,please have a look at the code below

<div id="simpleContainer">
  <h2 class="hDestination">Destination(s)</h2>
  <h2 class="hExtras">Extra(s)</h2>
</div>

<div id="advancedContainer">
  <h2 class="hDestination">Destination(s)</h2>
  <h2 class="hExtras">Extra(s)</h2>
</div>

I am trying to add some content in to the advancedContainer after h2 with class hDestination ,but it kept adding after the h2 with class hDestination of the simpleContainer as well.I only want the content to be added to advancedContainer after the h2 with class hDestination.

I tried the following code

$('<div>This is a test</div>').insertAfter('h2.hDestination','#advancedContainer');

Answer 1

Do it with .after() it reads better and for your scenario / context is more suited:

$('#advancedContainer h2.hDestination').after('<div>this is a test</div>');