<!DOCTYPE html>
<html>
<body>
<iframe src="../default.asp.html" style="height:400px;width:650px;"></iframe>
<div id="myDIV">
<span id="mySpan" style="font-size:35px;">A Span element</span>
</div>
<p>Click one button to remove the span element from its parent. Click the other button to insert the removed span element into the other document's h1 element (the new parent).</p>
<button onclick="removeLi()">Remove span</button>
<button onclick="myFunction()">Insert span</button>
<script>
var child = document.getElementById("mySpan");
function removeLi() {
child.parentNode.removeChild(child);
}
function myFunction() {
var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(child);
h.appendChild(x);
}
</script>
</body>
</html>