用jQuery打开div标签后插入Image标签

Question

我正在研究以下jQuery代码。假设我有以下HTML代码示例：

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

使用jQuery，我需要在打开<img src="smiley.gif" alt="Smiley face" height="42" width="42">标签之后立即添加以下div my-class。我需要定位my-class类选择器。

我要实现的目标如下：

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

我尝试了以下方法：

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

但这会在结束div标签之后插入它，这不是我想要的。

Answer 1

这可以通过.prepend()来实现，例如：

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

.after()将在主题元素的结束标记之后添加html。

.append()会将其放在div内，但在<h1>之后

Answer 2

我会这样：）

$('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>