Programming language:Html
f

Code: Html
2021-05-09 22:00:10
<!-- Using appendchild() DOM INSIDE HTML DOCUMENT -->
<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="UTF-8" />
  <title>WEB222</title>
  <style> 
    body { margin: 0 18%; } 
	#demo { background-color: lightblue; } 
  </style>
  <script type="text/javascript">	
	function appendChildToNode(){
	  // create a new paragraph element and give it some content 
	  var newNode = document.createElement("p"); 
	  
	  //add the text to the paragraph using the innerHTML property
	  newNode.innerHTML = "This a new paragraph"; 
	  
	  // add the new element to the end of the "demo" div element.
	  var demo_div = document.querySelector("#demo");
	  // var demo_div = document.getElementById("demo"); 
	  demo_div.appendChild(newNode); 
	}
	
	function appendChildToPage(){
	  // create a new <h2> node 
	  var newHeading = document.createElement("h2");   
   
	  //add text to using text node
	  var t = document.createTextNode(" This is a heading "); 
	  newHeading.appendChild(t);
 
	  // append the node to the end of the web page   
	  document.body.appendChild(newHeading);
	}
  </script>
</head>
<body>
  <h1>WEB222 - DOM node: Add node to node</h1>

  <div id='demo'> This text is within the "demo" div element.</div>
  <p> This paragraph is after the "demo" div element.</p>
  
  <br>
  <p><button onclick="appendChildToNode()">Append Child Node to Node</button></p>
  <hr>
  <p><button onclick="appendChildToPage()">Append Child Node to Web Page</button></p>
  <hr><br>
  <!-- for downloading source files -->
  <p><a href="" Download>Download</a></p>

</body>
</html>
New to Communities?

Join the community