<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>
把一串html
标签赋给一个
javascript
变量，除属性的值要用转义的双引号外，某些时候字符串还很长，显得有些复杂。如果用
js
动态添加元素，就不会有那么复杂的字符串出现，代码阅读性强一点，也容易理解。
网页是由
html
标签一层层组成的，js
也可以动态添加一层层的诸如
div、li、img
这样的标签。其实，不管是什么
html
标签，js
动态创建的方法都差不多，接着就先从动态添加
div
开始。
一、js
动态添加元素div
<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")
二、js
动态添加li
<ul
id="parentUl"><li>原li</li></ul>
function
addElementLi(obj)
{
var
ul
=
document.getElementById(obj)
//添加
li
var
li
=
document.createElement("li")
//设置
li
属性，如
id
li.setAttribute("id",
"newli")
li.innerHTML
=
"js
动态添加li"
ul.appendChild(li)
}
调用：addElementLi("parentUl")
三、js
动态添加元素img
<ul
id="parentUl"></ul>
function
addElementImg(obj)
{
var
ul
=
document.getElementById(obj)
//添加
li
var
li
=
document.createElement("li")
//添加
img
var
img
=
document.createElement("img")
//设置
img
属性，如
id
img.setAttribute("id",
"newImg")
//设置
img
图片地址
img.src
=
"/images/prod.jpg"
li.appendChild(img)
ul.appendChild(li)
}
调用：addElementImg("parentUl")
以上这篇js
动态添加元素(div、li、img等)及设置属性的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
