如何使用js创建html元素

Question

我有生成广告的html代码，并且我试图在js的帮助下生成这些代码，我只生成最后一个广告。我们如何获得分区中的所有广告

HTML代码：

<div class="list-group col-md-3" id="adsid"> 

     </div> 

和JS代码：

for (var i = 0; i < s.length; i++) { 
    var adid = s[i]['id']["0"]; 

    var desc1 = s[i]['desc']["0"]; 
    var desc2 = s[i]['desc2']["0"]; 
    var url = s[i]['url']["0"]; 
    $('#heading').html(s[i]['hea']["0"]); 
    $('#desc1').html(s[i]['desc']["0"]); 
    $('#desc2').html(s[i]['desc2']["0"]); 
    $('#desturl').html(s[i]['url']["0"]); 

    function create(htmlStr) { 
     var frag = document.createDocumentFragment(), 
      temp = document.createElement('div'); 
     temp.innerHTML = htmlStr; 
     while (temp.firstChild) { 
      frag.appendChild(temp.firstChild); 
     } 
     return frag; 
    } 
    var fragment = create('<h4 class="list-group-item-heading"id="heading" name="heading"><font color="blue"></font></h4><p class="list-group-item-text"id="desc1" name="desc1"></p><p class="list-group-item-text"id="desc2" name="desc2"></p><p class="list-group-item-text" id="desturl" name="desturl"><font color="green"></font></p>'); 
    document.getElementById("adsid").appendChild(fragment); 

} 

而且广告是动态的，它可能会有所不同，根据该选择，所以应该在本质上是动态的。

正如我正在尝试上面的代码，我只得到最后一个广告，但不是所有.please帮我在这个问题。 和样品输出应该是这样的：

Answer 1

删除上面的所有js代码以及与此

$(".list-group").each(function(i) { 
var adid=s[i]['id']["0"], 
    desc1=s[i]['desc']["0"], 
    desc2=s[i]['desc2']["0"], 
    url=s[i]['url']["0"], 
    heading = $('<div id="heading">').html(s[i]['hea']["0"]), 
    desc1 = $('<div id="desc1">').html(s[i]['desc']["0"]), 
    desc2 = $('<div id="desc2">').html(s[i]['desc2']["0"]), 
    desturl = $('<div id="desturl">').html(s[i]['url']["0"]); 
    $(this).append(heading) 
     .append(desc1) 
     .append(desc2) 
     .append(desturl); 
});