Change events, when the user modifies the DOM structure (adding or deleting an element node) occurs.
Any time when the DOM element is added to or removed from the DOM, DOM structure will change, and this change will touch change events.
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>Buns </ li> <Li> m dumplings </ li> 12 is13 is <Li> <a> fishmeal </a> </ Li> 14 </ UL> 15 <Button ID = " btnAdd " > Add </ Button> 16 <Script> . 17 var Elul = document.getElementById ( ' UL ' ); 18 is var BTN = document.getElementById ( ' btnAdd ' ); . 19 20 is function the Add () { 21 is // Create a new element 22 is var Newel = document.createElement ( ' Li ' ); 23 // Create a new text 24 var newText = document.createTextNode ( ' curd ' ); 25 // text into the element 26 is newel.appendChild (newText); 27 // add a new element to the parent 28 elul.appendChild (Newel); 29 } 30 31 is btn.addEventListener ( ' the Click ' , the Add, to false ); 32 elul.addEventListener ( ' DOMNodeInserted ' , myFunction, to false ); 33 is 34 is myFunction function () { 35 Alert ( ' just inserted a node oh ' ); 36 } 37 [ </ Script> 38 is </ body> 39 </ HTML>