<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>
<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>
详细的解题步骤如下:
<div id="parent"></div>
function addElementDiv(obj) {
var parent = document.getElementById(obj)
//添加 div
var div = document.createElement("div")
//设置 div 属性,如 id
div.setAttribute("id", "newDiv")
div.innerHTML = "js 动态添加div"
parent.appendChild(div)
}
调用:addElementDiv("parent")
什么是DIV元素:
1、DIV标签,称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象,或其他的放在 DIV 中,它可称作为"DIV block",或"DIV element"或"CSS-layer",或干脆叫"layer"。而中文我们把它称作"层次"。
2、DIV元素,是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。