create html content with Javascript loop

make it simple

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>

when you use .appendTo(".item"); you append to every .item elements,not the one you just created,same with .appendTo(".frame");

you can use the "inverse" function of appendTo

$(item).append(figure)//instead of $(figure).appendTo(".item");
//and
$(figure).append(img);//instead of img.appendTo(".frame");

edit:

append img to figure before appending figure to item

appendToadds the item to every element that matches the criteria. I suspect you only want to add the new figure and img elements to the item that you just added.

As the jQuery docs say,

If there is more than one target element, however, cloned copies of the inserted element will be created for each target except the last, and that new set (the original element plus clones) is returned.

So, what you're essentially doing is, foreach iteration of the for-loop, you're appending item to the .swiper div, and figure to each .item div, and img to each .frame figure. To fix this, you could change the code to:

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

The trick is not to use a general class selector but the variable referencing the just created element:

 var path = "projelerimiz/otel/balsamo/img/";
 var ext = ".jpg";
 var i = 1;

 var $img, $item, $figure;
 for (i; i <= 11; i++) {

   $item = $("<div />").addClass("item");
   $figure = $("<figure />").addClass("frame");
   $img = $("<img />").attr('src', path + i + ext);

   $item.appendTo(".swiper");
   $figure.appendTo($item);
   $img.appendTo($figure);
 }

.item{
  border: 1px solid black;
}

.frame{
  border: 1px solid red;
}

img{
  border: 1px solid green;
}

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

</div>

To expand on the answer from @lorenzo-catalano, you could write your code something more like this:

var path = "projelerimiz/otel/balsamo/img/";
var ext = ".jpg";
var i = 1;
var swiper = $('.swiper');
var img, item, figure;

for (i; i<=11;i++){     
  item = $('<div />')
    .addClass('item');

  figure = $('<figure />')
    .addClass('frame')
    .appendTo(item);

  img = $('<img>')
    .attr('src', path + i + ext)
    .appendTo(figure);

  item.appendTo(swiper);
}

For performance, you should only update the DOM once when all items have been crea (instead of each iteration through the loop like it does now)