revision:
The Document object's importNode() method creates a copy of a Node or DocumentFragment from another document, to be inserted into the current document later. The imported node is not yet included in the document tree. To include it, you need to call an insertion method such as appendChild() or insertBefore() with a node that is currently in the document tree.
Unlike document.adoptNode(), the original node is not removed from its original document. The imported node is a clone of the original.
importNode(externalNode)
importNode(externalNode, deep)
Parameters:
externalNode : required; the external Node or DocumentFragment to import into the current document.
deep : optional. A boolean flag, whose default value is false, which controls whether to include the entire DOM subtree of the externalNode in the import. If deep is set to "true", then externalNode and all of its descendants are copied. If deep is set to "false", then only externalNode is imported — the new node has no children.
<script>
const iframe = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
</script>
<div>
<iframe id="myFrame" src="/default.asp" style="height:380px;width:100%;"></iframe>
<p>Click "Import" to import the first H1 element in the iframe (another document).</p>
<button onclick="myFunction()">Import</button>
</div>
<script>
function myFunction() {
const frame = document.getElementById("myFrame");
const h1 = frame.contentWindow.document.getElementsByTagName("H1")[0];
const node = document.importNode(h1, true);
document.body.appendChild(node);
}
</script>