| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Dom Mutation Observer Test</title> |
| |
| <script> |
| let attrNumber = 1; |
| |
| function addAttr() { |
| let target = document.getElementById('attrTarget'); |
| let newAttr = 'testAttr' + String(attrNumber++); |
| target.setAttribute(newAttr, newAttr); |
| } |
| |
| function removeAttr() { |
| let target = document.getElementById('attrTarget'); |
| if(attrNumber > 1) { |
| let targetAttr = 'testAttr' + String(--attrNumber); |
| target.removeAttribute(targetAttr); |
| } |
| } |
| |
| let childNo = 1; |
| function addDivChild() { |
| let target = document.getElementById('childrenAddRemoveTarget'); |
| let para = document.createElement('p'); |
| let text = document.createTextNode('ChildAdded'); |
| para.appendChild(text); |
| target.appendChild(para); |
| childNo++; |
| } |
| |
| function removeDivChild() { |
| if(childNo > 1) { |
| let target = document.getElementById('childrenAddRemoveTarget'); |
| if(target.childNodes[0]) { |
| target.removeChild(target.firstChild); |
| } |
| childNo--; |
| } |
| } |
| |
| function modifyData() { |
| let target = document.getElementById('editDiv').firstChild; |
| target.appendData('AddedText.') |
| } |
| |
| function addFrame() { |
| let target = document.getElementById('frameContainer'); |
| let frame = document.createElement('iframe'); |
| let src = 'iframe-content.html'; |
| frame.setAttribute('src', src); |
| target.appendChild(frame); |
| } |
| </script> |
| </head> |
| |
| <body> |
| <div id="attrTarget" class="testClass" fakeAttr="fakeAttr">Target for attr mods</div> |
| <div id="editDiv" contenteditable>InitialText.</div> |
| <div id="childrenAddRemoveTarget"></div> |
| <div id="frameContainer"></div> |
| </body> |
| </html> |
