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

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

adoptNode method (document, XMLDocument)

Browser support:

9

Moves a node from another document to the current document.

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

If a node that belongs to another document needs to be inserted into the current document, 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.adoptNode (srcNode);

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

Parameters:

srcNode

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

Return value:

If the operation fails, it returns null, on success, it returns the adopted node. The adopted 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 adoptNode method.

Code

srcFrame.htm

<head>
    <script type="text/javascript">
        function AdoptElement () {
            var srcElement = GetSourceElement ();
            if (!srcElement) {
                alert ("No division element exists in the source document, maybe it is already adopted.");
                return;
            }

            var container = document.getElementById ("container");

            if (document.adoptNode) {   // all browsers, except IE before version 9
                var adopted = document.adoptNode (srcElement);
                if (adopted) {
                    container.appendChild (adopted);
                }
                else {
                    alert ("There was an error while adopting 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="AdoptElement ();">Adopt 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 AdoptElement () {
            var srcElement = GetSourceElement ();
            if (!srcElement) {
                alert ("No division element exists in the source document, maybe it is already adopted.");
                return;
            }
            
            var container = document.getElementById ("container");

            if (document.adoptNode) {   // all browsers, except IE before version 9
                var adopted = document.adoptNode (srcElement);
                if (adopted) {
                    container.appendChild (adopted);
                }
                else {
                    alert ("There was an error while adopting the element!");
                }
            }
            else {      // Internet Explorer before version 9
                    // create an element with the same name
                var adopted = 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) {
                        adopted.setAttribute (attribute.name, attribute.value); 
                    }
                }
                    // copy the entire contents of the source element
                adopted.innerHTML = srcElement.innerHTML;

                    // delete the source element
                srcElement.parentNode.removeChild (srcElement);
                
                    // add the adopted element to the current document
                container.appendChild (adopted);
            }
        }

        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="AdoptElement ();">Adopt 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>