Scribd
Upload
6 views

JavaScript Notes 5

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

JavaScript Notes 5

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like