In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > DOMNodeInserted

DOMNodeInserted event

Browser support:

9

Occurs on a node when it is added to an element.

The DOMNodeInsertedIntoDocument event is similar to the DOMNodeInserted event, but it occurs when a node is inserted into the document.

For example, if a node is added to an element that is not a part of the document, the DOMNodeInserted event is fired but the DOMNodeInsertedIntoDocument event is not. If the parent element of a node is inserted into the document, the DOMNodeInsertedIntoDocument event is fired but the DOMNodeInserted event is not. You can try it with Example 2 below.

To detect when a node is removed from an element or the document, use the DOMNodeRemoved and DOMNodeRemovedFromDocument events.

Note that the DOMNodeInserted event is buggy in Internet Explorer 9, it is not fired when a node is inserted for the first time. See the examples below for details.

How to register:

In HTML:

This event cannot be registered in HTML.

In JavaScript:

object.addEventListener ("DOMNodeInserted", handler, useCapture);

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	Yes
Cancelable	No
Event object	MutationEvent

Actions that invoke the DOMNodeInserted event:

Adding a node to an element.

Example HTML code 1:

This example illustrates the use of the DOMNodeInserted event. It does not work on Internet Explorer 9, because the DOMNodeInserted event is not fired in that browser when a node is inserted for the first time.

<head>
    <script type="text/javascript">
        function AddTextToContainer () {
            var textNode = document.createTextNode ("My text");
            if (textNode.addEventListener) {
                textNode.addEventListener ('DOMNodeInserted', OnNodeInserted, false);
            }
            
            var container = document.getElementById ("container");
            container.appendChild (textNode);
        }

        function OnNodeInserted (event) {
            var textNode = event.target;
            alert ("The text node '" + textNode.data + "' has been added to an element.");
        }
    </script>
</head>
<body>
    <div id="container" style="background-color:#e0d0a0; width:300px; height:100px;"></div>
    <br /><br />
    <button onclick="AddTextToContainer ();">Add a text node to the container!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved and DOMNodeRemovedFromDocument events. Unlike the previous example, this one works in Internet Explorer 9 for the DOMNodeInserted event.

<head>
    <script type="text/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.");
        }
    </script>
</head>
<body onload="Init ()">
    <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>
</body>