javascript - 使用 Javascript 循环创建 html 内容

Question

我的 JS =>

var path = "projelerimiz/otel/balsamo/img/";
var ext = ".jpg";
var i = 1;
var img, item, figure;
for (i; i<=11;i++){     
    item = '<div class="item"></div>';
    $(item).appendTo(".swiper");
    figure = '<figure class="frame"></figure>';
    $(figure).appendTo(".item");
    img = $('<img>'); //Equivalent: $(document.createElement('img'))
    img.attr('src', path + i + ext);
    img.appendTo(".frame");
}

我的 HTML =>

<div class="swiper">
</div>

运行 JS 代码时看到的内容 =>

what I saw

运行 JS 代码时我想看到什么=>

I want to see

我需要简单地使用 div、img 等循环 HTML 内容，但有一些嵌套循环。

谢谢。

Answer 1

让事情变得简单

var path = "projelerimiz/otel/balsamo/img/";
var ext = ".jpg";
var i = 1;
var img, item, figure;
var items = [];
for(i; i <= 11; i++) {
  item = '<div class="item"><figure class="frame">' +
    '<img src="' + path + i + ext + '"></figure></div>';
  items.push(item);
}

// for best performance append element outside loop
$('.swiper').append(items.join('\n'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="swiper">
</div>