元素的增加 刪除 及事件監聽
<!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>
</head>
<body>
<div>
點擊添加li
</div>
<ul>
<li>kkkk</li>
</ul>
<button>
點擊刪除節點
</button>
</body>
<script>
var ul = document.getElementsByTagName('ul')[0]
document.getElementsByTagName('div')[0].onclick = function () {//添加元素
var li=document.createElement('li');
var t=document.createTextNode('666')
li.appendChild(t)
ul.appendChild(li)
}
document.getElementsByTagName('button')[0].onclick = function () {//刪除元素
ul.removeChild(ul.lastElementChild)
}
ul.addEventListener('DOMNodeInserted',function () {
console.log(ul.childElementCount)
})
ul.addEventListener('DOMNodeRemoved',function () {
console.log(ul.childElementCount)
})
</script>
</html>