如何从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

因此，选择图像，遍历，读取属性，然后插入新元素。

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