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

DOMNodeInserted event

A A

Font size

Browser support:

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 the second example 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 ("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
Type	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:

<head>
    <script>
        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:

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

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

DOMNodeInsertedIntoDocument
DOMNodeRemoved
DOMNodeRemovedFromDocument
DOMSubtreeModified

External links:

DOMNodeInserted (W3C)

Digg

Del.icio.us

Facebook

Twitter

Diigo

User Contributed Comments