javascript - 如何添加 arr include many "src"of images into a source of image tag

Question

我想创建一个包含图像标签的 div，我想将一个包含许多 src 图像元素的数组推送到该 <img> 的源中我创造了。
这是我的代码，但它不起作用。

var push = "<div class='card'><img class='front' src=''><img class = 'back' src = 'images/back.png' </div>";

var images = ["images/s1.jpg", "images/s2.jpg", "images/s3.jpg", "images/s4.jpg", "images/s5.jpg", "images/s6.jpg", "images/s7.jpg", "images/s8.jpg"]

for (i = 0; i < 8; i++) {
  $(".content").append(push);
}

var images = $('.card').children('img').map(function() {
  return $(this).attr('src')
}).get()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="content">

  </div>
</div>

Answer 1

试试这个:

HTML:

<div class="wrap">
    <div class="content">

    </div>
</div>

JS:

var images = ["images/s1.jpg","images/s2.jpg","images/s3.jpg","images/s4.jpg","images/s5.jpg","images/s6.jpg","images/s7.jpg","images/s8.jpg"]

for(var i=0; i<images.length; i++){
    $('.content').append('<div class="card"><img class="front" src="'+images[i]+'"><img class="back" src="images/back.png"></div>');
}