Use DOMNodeInserted IE9compatible

by Ian Roberts

HTML

<button onclick="RemoveContainer ()">Remove the container</button>
    <button onclick="RemoveTextFromContainer ()">Remove the text form the container</button>
    <button onclick="AddContainer ()">Insert the container into the document</button>
    <button onclick="AddTextToContainer ()">Insert the text into the container</button>
    <br /><br />    
    <div id="container" style="background-color:#e0d0a0; width:300px; height:100px;">
        This is the text in the container.
    </div>

JavaScript

var containerParent = null, container = null, textNode = null;

        function Init () {
            container = document.getElementById ("container");
            textNode = container.firstChild;
            containerParent = container.parentNode;

            if (textNode.addEventListener) {
                textNode.addEventListener ('DOMNodeInserted', OnNodeInserted, false);
                textNode.addEventListener ('DOMNodeInsertedIntoDocument', OnNodeInsertedIntoDocument, false);
                textNode.addEventListener ('DOMNodeRemoved', OnNodeRemoved, false);
                textNode.addEventListener ('DOMNodeRemovedFromDocument', OnNodeRemovedFromDocument, false);
            }
        }

        function RemoveContainer () {
            if (container.parentNode) {
                container.parentNode.removeChild (container);
            }
        }

        function RemoveTextFromContainer () {
            if (textNode.parentNode) {
                textNode.parentNode.removeChild (textNode);
            }
        }

        function AddContainer () {
            if (!container.parentNode) {
                containerParent.appendChild (container);
            }
        }

        function AddTextToContainer () {
            if (!textNode.parentNode) {
                container.appendChild (textNode);
            }
        }

        function OnNodeInserted () {
            alert ("The text node has been added to the container.");
        }
        function OnNodeInsertedIntoDocument () {
            alert ("The text node has been inserted into the document.");
        }
        function OnNodeRemoved () {
            alert ("The text node has been removed from the container.");
        }
        function OnNodeRemovedFromDocument () {
            alert ("The text node has been removed from the document.");
        }

Init ()