Check out example codes for "f". It will help you in understanding the concepts better.

Code Example 1

<!-- Using appendchild() DOM INSIDE HTML DOCUMENT -->
<!DOCTYPE html>
<html lang="en"> 
  <meta charset="UTF-8" />
    body { margin: 0 18%; } 
	#demo { background-color: lightblue; } 
  <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"); 
	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 "); 
	  // append the node to the end of the web page   
  <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>
  <p><button onclick="appendChildToNode()">Append Child Node to Node</button></p>
  <p><button onclick="appendChildToPage()">Append Child Node to Web Page</button></p>
  <!-- for downloading source files -->
  <p><a href="" Download>Download</a></p>


Learn ReactJs, React Native from