Как создать элемент <span>из тега img alt и добавить его после строки <img>

Question

У меня есть несколько изображений с тегом 'alt', и я хочу извлечь тег 'alt' для каждого img и создать строку <span> + alt tag + </span> после каждого img. Я не знаю, как это сделать с помощью jQuery.

Результат должен быть следующим:

<img alt="Madrid" class="gallery__block vertical" src="1.jpg">
<span>Madrid</span>
<img alt="Paris" class="gallery__block vertical" src="2.jpg">
<span>Paris</span>
<img alt="Rome" class="gallery__block vertical" src="3.jpg">
<span>Rome</span>

Большое спасибо за любую помощь

Answer 1

Итак, выберите изображение, зациклите, прочитайте атрибут и вставьте новый элемент.

$("img").each(function(){
  var img = $(this);
  var span = $("<span/>");
  span.text(img.attr("alt"));
  img.after(span);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img alt="Madrid" class="gallery__block vertical" src="http://placekitten.com/100/100">
<img alt="Paris" class="gallery__block vertical" src="http://placekitten.com/100/100">
<img alt="Rome" class="gallery__block vertical" src="http://placekitten.com/100/100">

Answer 2

Это можно сделать с помощью этого:

$("img.gallery__block").each(function() {
    var $image = $(this);
    var $altTag = $image.attr('alt');
    var $span = $("<span></span>");
    $span.append($altTag);
    $image.after($span);
});