Insert Image tag after opening div tag with jQuery

Question

I am working on the following jQuery code. Assuming I have the following HTML code sample:

<div class="my-class"> 
   <h1>Hello</h1>
</div>

With jQuery, I need add the following <img src="smiley.gif" alt="Smiley face" height="42" width="42"> immediately after the opening div my-class tag. I need to target the my-class class selector.

What I am trying to achieve is the following:

<div class="my-class">
   <img src="smiley.gif" alt="Smiley face" height="42" width="42">
   <h1>Hello</h1>
</div>

I have tried the following:

$('div.my-class').after('<img src="smiley.gif" alt="Smiley face" height="42" width="42">');

but this inserts it after the closing div tag, which is not what I am after.

I think this is already answered here: https://stackoverflow.com/questions/4527911/how-to-insert-element-as-a-first-child — Slobodan Markovic, Mar 20 '19 at 12:18

score 1 · Accepted Answer · answered Mar 20 '19 at 12:20

This can be achieved with .prepend() like:

$('div.my-class').prepend('<img src="smiley.gif" alt="Smiley face" height="42" width="42">');

.after() will add the html after the closing tag of the subject element.

.append() will place it inside the div but after <h1>

score 0 · Answer 2 · answered Mar 20 '19 at 12:21

I'd do it like this :)

$('div.my-class').prepend('<img src="smiley.gif" alt="Smiley face" height="42" width="42">');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-class"> 
   <h1>Hello</h1>
</div>

Insert Image tag after opening div tag with jQuery

2 Answers2