变动事件，当用户修改了DOM结构（添加或删除元素节点）后发生。
任何时候当元素被添加到DOM中或从DOM中移除时，DOM的结构就发生了变化，而这种变化就会触动变动事件。
1 <html> 2 <head> 3 <title>变动事件</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 </head> 7 <body> 8 <p>变动事件</p> 9 <ul id="ul"> 10 <li>油条</li> 11 <li>包子</li> 12 <li>米饺</li> 13 <li><a>鱼粉</a></li> 14 </ul> 15 <button id="btnadd">添加</button> 16 <script> 17 var elul = document.getElementById('ul'); 18 var btn = document.getElementById('btnadd'); 19 20 function add() { 21 // 创建一个新的元素 22 var newel = document.createElement('li'); 23 // 创建一个新的文本 24 var newtext = document.createTextNode('豆花'); 25 // 将文本放到元素内 26 newel.appendChild(newtext); 27 // 将新的元素添加到父级 28 elul.appendChild(newel); 29 } 30 31 btn.addEventListener('click', add, false); 32 elul.addEventListener('DOMNodeInserted', myfunction, false); 33 34 function myfunction() { 35 alert('刚刚插入了一个节点哦'); 36 } 37 </script> 38 </body> 39 </html>