jquery - 如何使用 jquery 在图像标签后附加 div 元素？

Question

我使用jquery在图像标签后附加span元素。但显示在图像标签内的 span 元素。我正在将标题从一个地方移动到另一个地方，因此如果我使用 insertafter，它会在另一个地方重复。请检查以下代码并指导我解决这个问题

$(".wf_captionfirst").appendTo($("#articlespace img"));

输出显示

<img src="" ><span class="wf_captionfirst">adsfasdff</span></img>

Answer 1

您应该使用.insertAfter()。这将在每个 img 之后插入所选元素。

$(".wf_captionfirst").insertAfter($("#articlespace img"));

<小时/>

如果你想插入一张图片，那么你可以使用伪选择器；

$(".wf_captionfirst").insertAfter($("#articlespace img:first-of-type"));

或按 ID 或类别指定；

$(".wf_captionfirst").insertAfter($("#articlespace .imageContainer"));
$(".wf_captionfirst").insertAfter($("#articlespace #imageContainer"));

<小时/>

如果只有 1 个目标，insertAfter 不会复制该元素。演示:

$(document).ready(function() {
  $(".move").click(function() {
    $(".moveMe").insertAfter(".A");
  });
});

.A {
  padding: 40px;
  border: 1px solid blue;
}

.B {
  padding: 40px;
  border: 1px solid red;
}

.moveMe {
  padding: 2px;
  border: 1px solid black;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="move">Move</button>

<div class="moveMe">
  Test
</div>

<div class="A">

</div>

<div class="B">

</div>