如何使用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);

}

广告是动态的，可能因选择而异，因此它应该是动态的。

当我尝试上面的代码时，我只获得了最后一个广告，但并非所有广告。请帮我解决这个问题。 样本输出应该是这样的：

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