Live DOM Viewer
https://software.hixie.ch/utilities/js/live-dom-viewer/
innerText vs. innerHTML vs. textContent
https://betterprogramming.pub/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc
DOM2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM2</title>
</head>
<body>
<h3>Source element:</h3>
<p id="source">
<style>
#source {
color: red;
}
#text {
text-transform: uppercase;
}
</style>
<span id="text">Take a look at<br />how this text<br />is
interpreted below.</span>
<span style="display:none">HIDDEN TEXT</span>
</p>
<h3>Result of textContent:</h3>
<textarea id="textContentOutput" rows="6" cols="30"
readonly>…</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="30"
readonly>…</textarea>
<h3>Result of innerHTML:</h3>
<textarea id="innerHTML" rows="6" cols="30" readonly>…</textarea>
<script>
const source = document.getElementById("source");
const textContentOutput =
document.getElementById("textContentOutput");
const innerTextOutput =
document.getElementById("innerTextOutput");
const innerHTMLOutput = document.getElementById("innerHTML");
textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;
innerHTMLOutput.value = source.innerHTML;
</script>
</body>
</html>
OUTPUT:
DOM3
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM3</title>
</head>
<body>
<div id='source'>
This element
is <strong>strong</strong> and has some super fun
<code>code</code>!
</div>
<h3>Result of textContent:</h3>
<textarea id="textContentOutput" rows="6" cols="30"
readonly>…</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="30"
readonly>…</textarea>
<h3>Result of innerHTML:</h3>
<textarea id="innerHTML" rows="6" cols="30" readonly>…</textarea>
<script>
const source = document.getElementById("source");
const textContentOutput =
document.getElementById("textContentOutput");
const innerTextOutput =
document.getElementById("innerTextOutput");
const innerHTMLOutput = document.getElementById("innerHTML");
textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;
innerHTMLOutput.value = source.innerHTML;
</script>
</body>
</html>
OUTPUT:
Add/Remove elements to DOM
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/list.css">
</head>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>Paneer</em> Dosa</li>
<li id="two" class="hot">Nimbu Pani</li>
<li id="three" class="hot">Rava Dosa </li>
<li id="four">Filter Coffee </li>
</ul>
<script src="js/dom_update.js "></script>
</div>
</body>
</html>
Dom_update.js
//Add new Element at last
var li_new = document.createElement('li');
var new_textNode = document.createTextNode('Masala Chai')
li_new.appendChild(new_textNode);// add child at end
var ul = document.getElementsByTagName('ul')[0];
ul.appendChild(li_new);
li_new.className = 'new';
// Add Node on First Postion
var li_new_sambar_vada = document.createElement('li');
var new_textNode_sambar_vada = document.createTextNode('Sambar Vada');
li_new_sambar_vada.appendChild(new_textNode_sambar_vada);
ul.insertBefore(new_textNode_sambar_vada, ul.firstChild);
// Removing Element
var remove_ele = document.getElementsByTagName('li')[3];
var parent = remove_ele.parentNode;
if(parent){
parent.removeChild(remove_ele);
}
Comparing UPDATING HTML Content using
document.write() vs document.innerHTML vs DOM
Manipulation
