<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="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标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
