变动事件
变动事件，当用户修改了DOM结构（添加或删除元素节点）后发生。
任何时候当元素被添加到DOM中或从DOM中移除时，DOM的结构就发生了变化，而这种变化就会触动变动事件。
常见的变动事件有：
- DOMNodeInserted，当一个节点被插入到DOM树中时触发。
- DOMNodeRemoved，当一个节点从DOM树中移除时触发。
- DOMSubtreeModified，当上述两个事件触发后再触发。
- DOMNodeInsertedIntoDocument，当一个节点作为后代节点被插入到另一个已经存在于文档中的节点时触发。
- DOMNodeRemovedFromDocument，当一个节点作为后代节点从另一个已经存在于文档中的节点移除时触发。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>变动事件</p>
<ul id="ul">
<li>油条</li>
<li>包子</li>
<li>米饺</li>
<li><a>鱼粉</a></li>
</ul>
<button id="btnadd">添加</button>
<script>
var elul = document.getElementById('ul');
var btn = document.getElementById('btnadd');
function add() {
var newel = document.createElement('li');
var newtext = document.createTextNode('豆花');
newel.appendChild(newtext);
elul.appendChild(newel);
}btn.addEventListener('click', add, false);
elul.addEventListener('DOMNodeInserted', myfunction, false);
function myfunction() {
alert('刚刚插入拉一个节点');
}
</script>
</body>
</html>