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

【问题标题】：jQuery create multiple HTML elements without overwriting old HTMLjQuery 创建多个 HTML 元素而不覆盖旧的 HTML
【发布时间】：2017-02-20 21:58:20
【问题描述】：

我想创建一个动态 jQuery 函数，它计算数组中的结果，然后为数组中的每个对象创建一个 HTML 元素。该数组由 SharePoint API 创建。因此，如果有 3 个结果/对象运行代码 3 次。如果有 2 个结果/对象，则运行代码 2 次。

使用下面的代码，它会从数组中创建最后一个结果（对象）并覆盖之前创建的结果。

我正在考虑一段代码来计算对象，然后使用 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));
    }
});

【问题讨论】：

使用.append()，而不是.html()，所以它添加到DIV而不是替换它。
另外，ID 必须是唯一的。你不能在每一个上都使用id="inputTitle" 和id="inputURL"。
追加工作谢谢 :) 我会将对象 ID 放在 div 中的 ID 后面。比它应该工作

标签： jquery html arrays sharepoint

【解决方案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);
   });
},

【讨论】：