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

回答

相關問題