jQuery创建多个HTML元素而不覆盖旧的HTML

Question

I would like to make a dynamic jQuery function that counts the results from the array and than makes for every object in the array an HTML element. The array is made by an SharePoint API. So if there are 3 results/objects run the code 3 times. If there are 2 results/objects run the code 2 times.

With the code below it creates the last result(object) from the array and overwriting the previous made ones.

I was thinking about a piece of code that counts the object and then use the append() function to add the HTML fields. loop it as many times as there are objects. But not sure this is the best way.

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

You need to use .append() , not .html() , so you add instead of replacing. And you can't use the same ID each time, use a class instead.

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);
   });
},