Posted By
Bajarangi soft ,
Posted On 25-09-2020
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
<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>