用jQuery打开div标签后插入图片标签[重复]

Question

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

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

使用 jQuery，我需要在打开的 div my-class 标记之后立即添加以下 <img src="smiley.gif" alt="Smiley face" height="42" width="42">。我需要定位 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>