Как добавить элемент div после тега изображения, используя jquery?

Question

Я использовал jquery для добавления элемента span после тега image. Но элемент span, показанный внутри изображения tage. Я перемещаю заголовок из одного места в другое, поэтому, если я использую inserttafter, он будет использован в другом месте. Пожалуйста, проверьте с помощью следующего кода и направьте меня для решения этой проблемы

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

Вывод показывает

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

Answer 1

Вы должны использовать .insertAfter(). Это вставит выбранный элемент после каждого img.

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

---

. Если вы хотите вставить один img, вы можете использовать псевдо-селекторы;

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

или указать по ID или классу;

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

---

insertAfter не дублирует элемент, ЕСЛИ есть только 1 цель. Демо:

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