<?php
require_once("../includes/config.inc.php");
$page_title = "Welcome to My Site";
$page_author = "Kobari Xiong";
$page_description = "Welcome to my website about manipulating DOM elements";
require("../includes/header.inc.php");
?>
	    	<!-- Beginning of blog post -->
	    	<div class="blog-post">
	    		<h2 class="blog-post-title">Manipulating DOM elements</h2>
	    	  	<p class="blog-post-meta">Sept 17, 2020 by Kobari Xiong</p>

	    	  	<p>This blog post is going to be on how to manipulate DOM elements.  
					  Manipulating DOM elements can be one of the most unique and helpful skills in Javascript.  
					  First we need to know what is DOM in relation to a webpage.  DOM stands for "Document Object Model" 
					  which is a tree-like representation of the contents on a webpage.  The DOM contains "Nodes" which 
					  are any objects in the DOM hierarchy.  Nodes are not quite the same as elements though because an 
					  element is one specific type of node.  There are many types of nodes such as text nodes, comment nodes, 
					  document nodes, etc.</p>
	    	  	<hr>
	    	  	<h3>How to add new elements to DOM</h3>
	    	  	<p>
				  To create a new element in an HTML document, you can use the <mark>document.createElement()</mark> method.  
				  This will create the new element but this will not add it to the DOM.  The code sample below will show you 
				  how to add it to the DOM.
	    	  	</p>
	    	  
	    	  	<p>
	    	  		Here is the code sample:
	    	  	</p>
	    	  	<pre class="language-js"><code>
//Creates a new div element
var newDiv = document.createElement("div");

//Creates a text node
var newContent = document.createTextNode("Hello there!");

//Adds the text node to the new created div
newDiv.appendChild(newContent);

//Adds new created element and its content into the DOM
var currentDiv = document.getElementById("main");
document.body.appendChild(newDiv, currentDiv);
				</code></pre>
				<p>
					Here you can see that we have created a new div element with <mark>document.createElement()</mark>.  
					We have also created a text node with <mark>document.createTextNode()</mark>.  To add the text node to 
					the new div we created, we can use the <mark>appendChild()</mark> method which adds the new element at 
					the end of any other children of a specific parent node.  Last but not least, the lasts line of code shows 
					how to add the new created element and what it stores into the DOM.  You create a variable of the current 
					div element by using <mark>getElementById()</mark>.  You then use <mark>document.body.appendChild()</mark> 
					to append the new div to the current div.
				</p>
	    	  	<h3>How to get or set HTML contents to DOM</h3>
	    	  	<p>
				  There are also ways to set or get contents of the HTML elements with the <mark>innter.HTML</mark>.  
				  Using the <mark>innter.HTML</mark> property gets or sets the HTML markup contained within the element content 
				  in the middle of the opening and closing tags.
				</p>
				  
				<p>
	    	  		Here's a code sample:
				</p>
				<pre class="language-js"><code>
//Getting inner HTML contents
var contents = document.getElementById("main").innerHTML;
alert(contents); // Outputs inner html contents

//Setting inner HTML contents
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<P>This is <em>newly inserted</em> paragraph.</p>";
				</code></pre>

	    	</div>
	    	<!-- End of blog post -->
<?php
require("../includes/footer.inc.php");
?>