HTML - DOM Document adoptNode() Method

Quiz

HTML DOM adoptNode() method adopts a node from another document into the present document. All nodes can be adopted using adoptNode() method including parent and child nodes.

When adoptNode() Method is used, node and it's child node from it's original document is removed.
Node's owner document property is changed to current document.
Adopted node can now be insetred into current document.

Syntax

document.adoptNode(node);

Parameter

HTML DOM Document adoptNode() method accepts a single parameter as listed below:

Parameter	Description
node	It represents the node which you want to adopt from the other HTML document.

Return value

It returns a node object which was adopted from the other document.

Example of HTML DOM Document adoptNode() Method

Following example shows moving of <h1> from one webpage name (adoption.htm) to other webpage (adopted.htm).

This is the page (adoption.htm) from where elements will be adopted.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Adoption file</title>
</head>
<body>
    <h1>I am being adopted</h1>
    <h1>Welcome to TutorialsPoint</h1>
    <h1>This is adoptNode() method tutorial</h1>
</body>
</html>

In this page (adopted.htm) elements will be adopted from different page.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM document adoptNode() Method</title>
</head>
<body>
    
    <iframe src="adoption.htm"  style="height: 400px; width: 400px"></iframe>
    <button onclick="fun()">Click me</button>
    <script>
        function fun(){
            let frame =document.getElementsByTagName("iframe")[0];
            let adopted_ele=frame.contentWindow.document.getElementsByTagName("h1")[0];
            let result=document.adoptNode(adopted_ele);
            document.body.appendChild(result);
        }
    </script>
</body>
</html>

Supported Browsers

Method
adoptNode()	Yes 1	Yes 12	Yes 1	Yes 3	Yes 12.1

Print Page