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

我想制作一个动态的jQuery函数来计算数组的结果，并且为数组中的每个对象创建一个HTML元素。该数组由SharePoint API创建。所以如果有3个结果/对象运行代码3次。如果有2个结果/对象运行代码2次。jQuery创建多个HTML元素而不覆盖旧的HTML

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

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

来源

2017-02-20 Tiboon

使用'.append（）'，而不是'.html（）'，所以它添加到DIV而不是替换它。 – Barmar

另外，ID必须是唯一的。你不能在每一个上使用'id =“inputTitle”'和'id =“inputURL”'。 – Barmar

追加工作谢谢:)我会把ID后面的对象ID在div中。比它应该工作 – Tiboon

您需要使用.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); 
    }); 
},

来源

2017-02-20 13:58:20 Barmar

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

回答

相关问题