如何从 img alt 标签创建 <span> 元素并将其附加到 <img> 行之后

Question

我有一些带有 'alt' 标签的图像，我想为每个 img 提取 'alt' 标签并在每个 img 之后创建一个 <span> + alt tag + </span> 行。我不知道如何使用 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

所以select图像，循环，读取属性，并插入一个新元素。

$("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);
});