怎样在一个空div中动态插入多个新div元素

怎样在一个空div中动态插入多个新div元素,第1张

var creatediv= function(){

    var parentdiv=$('

')        //创建一个父div,如果已经有了就获取

    parentdiv.attr('id','parent')        //给父div设置id

    parentdiv.addclass('parentdiv')    //添加css样式    var childdiv=$('

')        //创建一个子div

    childdiv.attr('id','child')            //给子div设置id

    childdiv.addclass('childdiv')    //添加css样式

    childdiv.appendto(parentdiv)        //将子div添加到父div中    parentdiv.appendto('parentdiv')            //将父div添加到父级中去

}

<div id="abc"></div>

<script>

//你也没说一下php返回的数据结构究竟是怎样的。我假定是下面这样的:

var res=[

    {a:1,b:2,c:23,d:34},

    {a:231,b:2,c:39,d:14},

    {a:1,b:2,c:453,d:784},

    {a:981,b:1221,c:33,d:124},

    {a:1,b:2,c:334,d:41243},

    {a:12341,b:2,c:563,d:47},

    {a:5121,b:1232,c:433,d:24}

]

document.getElementById("abc").innerHTML=res.map(function(o){

    var html=""

    html+='<div class="p-l-20 p-r-20 p-b-10 p-t-10 b-b b-grey">'

    html+='<div class="pull-left">'

    html+='<p class="text-important">'+o.a+'</p>'

    html+='<p class="text-black">'+o.b+'</p>'

    html+='</div>'

    html+='<div class="pull-right">'

    html+='<p class="text-black">'+o.c+'</p>'

    html+='<span class="label label-success" style="vertical-align: bottom" >'+o.d+'</span>'

    html+='</div>'

    html+='<div class="clearfix"></div>'

    html+='</div>'

    return html

}).join("")

</script>

var t=document.getElementById("kw")//获取目的div层

var y=document.createElement("div")//创建div层

t.appendChild(y)//添加新建div到目的div


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11734286.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存