如何将照片动态加载到动态加载的 div 中？

Question

I wrote this code, which creates divs depending on the amount of text files in local directory.

Then I tried to write additional code, which appends photos to each of these divs. Unfortunately, this code doesn't append any photos...

function liGenerator() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE) {
        if (xmlhttp.status == 200) {
          var n = (xmlhttp.responseText.match(/txt/g) || []).length;
          for (var i = 1; i < n; i++) {
            $.get("projects/txt/"+i+".txt", function(data) {
              var line = data.split('\n');
              var num = line[0]-"\n";
              var clss = line[1];
              var title = line[2];
              var price = line[3];
              var content = line[4];
              $("#list-portfolio").append("<li class='item "+clss+" show' onclick='productSelection(&#39;"+num+"&#39;)'><img src='projects/src/"+num+"/title.jpg'/><div class='title'><h1>"+title+"</h1><h2>"+price+"</h2></div><article>"+content+"</article></li>");
              $("#full-size-articles").append("<li class='product "+num+"'><div><div class='photo_gallery'><div id='fsa_img "+num+"'><div width='100%' class='firstgalleryitem'></div></div></div><article class='content'><h1 class='header_article'>"+title+"</h1><h2 class='price_article'>"+price+"</h2><section class='section_article'>"+content+"</section></article></div></li>");
          });
        }
      }
    }
  };
  xmlhttp.open("GET", "projects/txt/", true);
  xmlhttp.send();
}   

function pushPhotos() {
  var list = document.getElementById("full-size-articles").getElementsByTagName("li");
  var amount = list.length;
  for(var i=1;i<=amount;i++) {
    var divID = "#fsa_img "+i;
    var where = "projects/src/"+i+"/";
    var fx = ".jpg";
    loadPhotos(where, fx, divID);
  }
}

function loadPhotos(dir, fileextension, div) {
  $.ajax({
    url: dir,
    success: function (data) {
      $(data).find("a:contains(" + fileextension + ")").each(function () {
        var filename = this.href.replace(window.location, "").replace("http://", "");
        $(div).append("<img src='"+dir+filename+"' class='mini_photo'/>");
      });
    }
  });
}

Any ideas on why this code is not working as intended?

Answer 1

The main issue is the space between "#fsa_img" and "i". When I changed it to '"#fsa_img_"+i', the code started work as intended.