<!DOCTYPE HTML> <meta charset=utf-8> <title>MutationObservers: innerHTML, outerHTML mutations</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="mutationobservers.js"></script> <h1>MutationObservers: innerHTML, outerHTML mutations</h1> <div id="log"></div> <section style="display: none"> <p id='n00'>old text</p> <p id='n01'>old text</p> <div id='n02'><p>old text</p></div> </section> <script> var n00; var n00oldText; var n01; var n01oldText; var n02; setup(function() { n00 = document.getElementById('n00'); n00oldText = n00.firstChild; n01 = document.getElementById('n01'); n01oldText = n01.firstChild; n02 = document.getElementById('n02'); }) runMutationTest(n00, {childList:true,attributes:true}, [{type: "childList", removedNodes: [n00oldText], addedNodes: function() { return [document.getElementById("n00").firstChild]; }}, {type: "attributes", attributeName: "class"}], function() { n00.innerHTML = "new text"; n00.className = "c01"}, "innerHTML mutation"); runMutationTest(n01, {childList:true}, [{type: "childList", removedNodes: [n01oldText], addedNodes: function() { return [document.getElementById("n01").firstChild, document.getElementById("n01").lastChild]; }}], function() { n01.innerHTML = "<span>new</span><span>text</span>"; }, "innerHTML with 2 children mutation"); runMutationTest(n02, {childList:true}, [{type: "childList", removedNodes: [n02.firstChild], addedNodes: function() { return [n02.firstChild]; }}], function() { n02.firstChild.outerHTML = "<p>next text</p>"; }, "outerHTML mutation"); </script>