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

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

DOMNodeInsertedIntoDocument event

Browser support:

Occurs on a node when it is inserted into the document.

The DOMNodeInserted event is similar to the DOMNodeInsertedIntoDocument event, but it occurs when a node is added to an element.

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.

How to register:

In HTML:

This event cannot be registered in HTML.

In JavaScript:

object.addEventListener ("DOMNodeInsertedIntoDocument", 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	No
Cancelable	No
Event object	MutationEvent

Actions that invoke the DOMNodeInsertedIntoDocument event:

Inserting a node into the document.

Example HTML code 1:

This example illustrates the use of the DOMNodeInsertedIntoDocument event:

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

        function OnNodeInsertedIntoDocument () {
            alert ("The text node has been inserted into the container.");
        }
    </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:

<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>