如何用js动态创建一个div，然后在div里面再添加div？

JavaScript018

如何用js动态创建一个div，然后在div里面再添加div？,第1张

使用JSer吧，它是一个全功能的javascript开源脚本框架。

创建一个DIV放到BODY中：

var div = JSer("<div/>").appendTo("body")

再创建一个DIV放这个DIV中：

var div1= JSer("<div/>").appendTo(div)

再例如向这个DIV1中添加文本内容：

div1.html("AAAAAAAAA")

有关更多的，请百度搜索JDiy进官网了解

<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>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.fadeIn { animation: fadeIn .3s linear forwards background-color: red height: 100px margin-bottom: 10px }

@keyframes fadeIn {

0% { opacity: 0 height: 0 }

100% { opacity: 1 height: 100px }

}

</style>

</head>

<body>

<button id='button'>插入一个div</button>

<div id="content">

</div>

<script>

window.addEventListener('load', function() {

var i = 0

var button  = document.getElementById('button')

var conntent = document.getElementById("content")

button.addEventListener('click', function(e) {

var div = document.createElement('div')

div.textContent = i++

div.className = 'fadeIn'

conntent.appendChild(div)

})

})

</script>

</body>

</html>