jQuery創建多個HTML元素而不覆蓋舊的HTML

Question

我想制作一個動態jQuery函數，該函數計算數組中的結果，然后為數組中的每個對象創建一個HTML元素。 該數組由SharePoint API組成。 因此，如果有3個結果/對象，則將代碼運行3次。 如果有2個結果/對象，則將代碼運行2次。

使用下面的代碼，它從數組中創建最后一個result（object）並覆蓋之前的結果。

我正在考慮一段計算對象的代碼，然后使用append（）函數添加HTML字段。 循環遍歷對象的次數。 但是不確定這是最好的方法。

jQuery.ajax({
  url: "http://URL/_api/web/webs",
  type: "GET",
  headers: { "accept": "application/json;odata=verbose" },
  success: function (data) {
           console.log(data.d.results);
           var aSites = data.d.results;
           jQuery(aSites).each(function(i,oSite){
               var sTitle = oSite.Title;
               var sURL = oSite.Url;
               console.log(sTitle, sURL);
               jQuery('.wrapper').html(jQuery('<div class="Title"><p>Title:</p><input type="text" name="fname" id="inputTitle"></div><div class="URL"><p>URL:</p><input type="text" name="fname" id="inputURL"></div>'));
               jQuery( "#inputTitle" ).val(sTitle);
               jQuery( "#inputURL" ).val(sURL);
           });
    },
  error: function (error) {
        alert(JSON.stringify(error));
    }
});

Answer 1

您需要使用.append()而不是.html() ，所以您添加而不是替換。 而且您不能每次都使用相同的ID，而應使用類。

success: function (data) {
   console.log(data.d.results);
   var aSites = data.d.results;
   $('.wrapper').empty();
   jQuery(aSites).each(function(i,oSite){
       var sTitle = oSite.Title;
       var sURL = oSite.Url;
       console.log(sTitle, sURL);
       var newDIV = jQuery('<div class="Title"><p>Title:</p><input type="text" name="fname" class="inputTitle"></div><div class="URL"><p>URL:</p><input type="text" name="fname" class="inputURL"></div>'));
       newDIV.find(".inputTitle" ).val(sTitle);
       newDIV.find(".inputURL" ).val(sURL);
       $('.wrapper').append(newDIV);
   });
},