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

You are here: Reference > JavaScript > client-side > HTML DOM > methods > importNode (document, XMLDocument)

importNode method (document, XMLDocument)

Browser support:

9

Copies a node from another document to the current document.

Note: The importNode method is supported in Internet Explorer from version 9.

If a node that belongs to another document needs to be inserted, then it must be imported first. Nodes can be imported with the adoptNode and importNode methods.

The adoptNode method moves the source node, while the importNode method copies it.

The entire subtree that belongs to the node is moved or copied by these methods, although the importNode method can also be used to copy a node without its descendants.

The adoptNode and importNode methods are supported in all browsers except in Internet Explorer before version 9. Internet Explorer does not provide a way to import an element into another document before version 9, only a workaround is possible as shown in Example 2.

Note: because of security restrictions, the contents of a document can be accessed from another document only if the two documents are located in the same domain.

If you want to copy a node within a document, use the cloneNode method.

Syntax:

object.importNode (srcNode, subTree);

You can find the related objects in the Supported by objects section below.

Parameters:

srcNode

Required. Reference to the source node to copy into the current document.

subTree

Required. Boolean that indicates whether the entire subtree that belongs to the source node needs to be imported.

One of the following values:

false

Import node without its descendants.

true

Import node with its descendants.

Return value:

If the operation fails, it returns null, on success, it returns the imported node. The imported node doesn't have a parent node (parentNode is null), but the ownerDocument property of the node is set to the current document.

Example HTML code 1:

This example illustrates the use of the importNode method.

Code

srcFrame.htm

<head>
    <script type="text/javascript">
        function ImportElement () {
            var srcElement = GetSourceElement ();
            var container = document.getElementById ("container");

            if (document.importNode) {  // all browsers, except IE before version 9
                var imported = document.importNode (srcElement, true);
                if (imported) {
                    container.appendChild (imported);
                }
                else {
                    alert ("There was an error while importing the element!");
                }
            }
            else {      // Internet Explorer before version 9
                alert ("Your browser does not support this example!");
            }
        }

        function GetSourceElement () {
            var frame = document.getElementById ("myFrame");
            // same as contentDocument, but contentWindow is supported by all browsers
            var frameDoc = frame.contentWindow.document;
            var srcElement = frameDoc.getElementById ("src");
            return srcElement;
        }
    </script>
</head>
<body>
    <iframe id="myFrame" src="srcFrame.htm"></iframe>
    <button onclick="ImportElement ();">Import the division element!</button>
    <div id="container"></div>
</body>

<!DOCTYPE html>
<html>
<head>
    <title>Source Frame</title>
    <meta charset="utf-8" />
<body>
    <div id="src">A simple division element with <b>formatted text</b>.</div>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is a cross-browser solution for the previous example:

Code

srcFrame.htm

<head>
    <script type="text/javascript">
        function ImportElement () {
            var srcElement = GetSourceElement ();
            var container = document.getElementById ("container");

            if (document.importNode) {  // all browsers, except IE before version 9
                var imported = document.importNode (srcElement, true);
                if (imported) {
                    container.appendChild (imported);
                }
                else {
                    alert ("There was an error while importing the element!");
                }
            }
            else {      // Internet Explorer before version 9
                    // create an element with the same name
                var imported = document.createElement (srcElement.nodeName);
                    // copy the attributes of the source element
                for (var i=0; i < srcElement.attributes.length; i++) {
                    var attribute = srcElement.attributes[i];
                    if (attribute.specified) {
                        imported.setAttribute (attribute.name, attribute.value); 
                    }
                }
                    // copy the entire contents of the source element
                imported.innerHTML = srcElement.innerHTML;
                
                    // add the imported element to the current document
                container.appendChild (imported);
            }
        }

        function GetSourceElement () {
            var frame = document.getElementById ("myFrame");
            // same as contentDocument, but contentWindow is supported by all browsers
            var frameDoc = frame.contentWindow.document;
            var srcElement = frameDoc.getElementById ("src");
            return srcElement;
        }
    </script>
</head>
<body>
    <iframe id="myFrame" src="srcFrame.htm"></iframe>
    <button onclick="ImportElement ();">Import the division element!</button>
    <div id="container"></div>
</body>

<!DOCTYPE html>
<html>
<head>
    <title>Source Frame</title>
    <meta charset="utf-8" />
<body>
    <div id="src">A simple division element with <b>formatted text</b>.</div>
</body>
</html>