Javascript DOM HTML Node removeChild Method remove from one document and add to another document

Introduction

Remove a <span> element from its parent and insert it to an <h1> element in another document:

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.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.java2s.com" style="height:400px;width:650px;"></iframe>

<div id="myDIV">
  <span id="mySpan" style="font-size:35px;">A Span element</span>
</div>//from   www.  j  av  a 2s .  c  o  m
<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>



PreviousNext

Related