javascript - 无法使用 jquery 在第二张图片后添加内容

Question

我不知道如何在页面上的第二个图像之后添加 html。 如果我以 <p> 为目标，我的代码工作正常, <div>或其他任何内容，但不是图像。

我在控制台中没有收到任何错误。

这是我的 JS: $("#blog-main > img:nth-child(2)").append("<div>inserted div</div>");

而 html 是这样的:

<div class="col-sm-8 blog-main" id="blog-main">
<p></p>
<img src="" />
<p></p>
<img src="" />
</div>

有人可以帮我解决这个问题吗？解决方案一定很简单，但我想不出来。

Answer 1

使用 :eq(1) 选择第二个 img 标签并使用 after() 在img标签后添加内容

 $("#blog-main > img:eq(1)").after("<div>inserted div</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="col-sm-8 blog-main" id="blog-main">
  <p></p>
  <img src="" />
  <p></p>
  <img src="" />
</div>