f
<!-- 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>