Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
11 views

JavaScript Notes 5

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

JavaScript Notes 5

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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