How To Use HTML DOM AdoptNode Method In JavaScript

admin_img Posted By Bajarangi soft , Posted On 25-09-2020

In Java Script HTML DOM adoptNode() Method will get only specified tag name data from another document .for example first we need to create iframe from that iframe file we can adopt the data. so today we are going to discuss about adoptNode() method in java script

How To Use HTML DOM AdoptNode Method In JavaScript

The adoptNode() method adopts a node from another document and adopted node can be of all node types.

Note: All child nodes (descendants), if any, of the adopted node, are also adopted.

Note: The original node (and its child nodes, if any) is removed from the other document.

the document.importNode() method to copy a node, without removing it, from another document and the    element.cloneNode() method to copy a node, without removing it, from the current document.

Syntax and Usage

document.adoptNode(node)
 

Parameter Values

node    Node object    Required. The node from another document. Can be of any node type


Example(1)
<script>
    function myFunction() {
        var frame = document.getElementsByTagName("IFRAME")[0]
        var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
        var x = document.adoptNode(h);
        document.body.appendChild(x);
    }
</script>
 

In above example adopting the first <h1> element that appears in an iframe (another document)
 

Complete Code For HTML DOM AdoptNode Method In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM AdoptNode Method In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="text-center">
        <h1>HTML DOM AdoptNode Method In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <iframe src="backup2.php" style="height:300px;width:1000px;"></iframe>
        <p>Click the "Click" button to adopt and display the value of the first H1 element in the iframe (another document).</p>
        <button onclick="adopt()" class="btn btn-primary">Click</button>
    </div>
    <br>
</div>
</body>
</html>
<script>
    function adopt() {
        var frame = document.getElementsByTagName("IFRAME")[0]
        var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
        var x = document.adoptNode(h);
        document.body.appendChild(x);
    }
</script>

 

Related Post