JS DOM - 02.03 - DOM Modifying Practice

<body>
	<h1>TITLE OF WEBPAGE</h1>
	<div id="container"></div>
</body>

const container = document.querrySelector("#container");

const content = document.createElement("div");  // make a div
content.classList.add("content");     // add a class
content.textContent = "A line of text content";  // add text
container.appendChild(content);  // append to parent div

When the js file runs the DOM tree will look like

<body>
	<h1>TITLE OF WEBPAGE</h1>
	<div id="container">
		<div class="content">A line of text content</div>
	</div>
</body>

js will not alter the html file, it just affects how the browser renders the content.

js should run after the DOM tree and its nodes are created otherwise it will not work properly. To avoid issues, js is included at the end of the html file or, the js file can be linked in the <head> of the file with keyword defer to load the file after the HTML is parsed.

<head>
	<script src="file.js" defer></script>
</head>

more about deferattribute for script tag

for Practice

Creating a list from user input

<script>
	let ul = document.createElement('ul');
	document.append(ul);
	
	while(true){
		let data = prompt('Enter the text for the list', "");
		
		if(!data){
			break;}
		
		let li = document.createElement('li');
		li.textContent = data;
		ul.append(li);
		}
</script>

Create a tree from object

Creating a nested ul/li list from nested objects.

let data = {
	"Fish": {
		"trout": {},
		"salmon":{}
		},
	"Tree": {
		"Huge":{
			"sequoia": {},
			"oak": {}
			},
		"Flowering":{
			"apple tree": {},
			"magnolia": {}
			}
	}
};

let container = documnet.querySelector('#container');
createTree(container, data);

// creating nodes and appending with DOM methods

function createTree(container, obj){
	container.append( createTreeDom(obj) );
}

function createTreeDom(obj){  // recursive function
	if (!Object.keys(obj).length) return null;
	// if no children, return undefined, base case
	
	let ul = documnet.createElement('ul');
	
	for (let key in obj) {
		let li = document.createElement('li');
		li.innerHTML = key;
		
		let childrenUl = createTreeDom(obj[key]);
		if (childrenUl) {
			li.append(childrenUl);
		}
		ul.append(li);
	}
	return ul;
}

Same thing but didn’t feel intuitive

// creating HTML of tree and assigning it using `container.innerHTML`

function createTree(container, obj){
	container.innerHTML = createTextTree(obj);
}

function createTextTree(obj){  // recursive function
	let li = '';
	let ul;
	
	for (let key in obj) {
		li += '<li>' + key + createTextTree(obj[key]) + '</li>';
		}
	if (li) {
	ul = '<ul>' + li + '</ul>'
	}
	return ul || '';
}

Checking descendants in a nested list tree

<!DOCTYPE HTML>
<html>
<body>

	<ul>
		<li>Animals
			<ul>
				<li>Mammals
					<ul>
						<li>Cows</li>
						<li>Donkeys</li>
						<li>Dogs</li>
						<li>Tigers</li>
					</ul>
				</li>

				<li>Other
					<ul>
						<li>Snakes</li>
						<li>Birds</li>
						<li>Lizards</li>
					</ul>
				</li>
			</ul>
		</li>

		<li>Fishes
			<ul>
				<li>Aquarium
					<ul>
						<li>Guppy</li>
						<li>Angelfish</li>
					</ul>
				</li>

				<li>Sea
					<ul>
						<li>Sea trout</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>

</body>
</html>

let lis = document.getElementsByTagName('li');

for (let li of lis) {
// get the count of all <li> below this <li>

let descendantsCount = li.getElementsByTagName('li').length;

if (!descendantsCount) continue;
  
// add directly to the text node (append to the text)
li.firstChild.data += ' [' + descendantsCount + ']';
}

- Animals [9]
    - Mammals [4]
        - Cows
        - Donkeys
        - Dogs
        - Tigers
    - Other [3]
        - Snakes
        - Birds
        - Lizards
- Fishes [5]
    - Aquarium [2]
        - Guppy
        - Angelfish
    - Sea [1]
        - Sea trout

Insert the HTML in the list

<ul id='ul'>
	<li id='one'>1</li>
	<li id='two'>4</li>

Insert <li>2</li><li>3</li> between two <li>

one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');

not seen yet

Create a calendar Colored clock with setInterval Sort the table

Edit this page on GitHub

JS DOM - 02.02 - DOM Basics

JS DOM - 02.04 - Class & Atributes

Sujith's Library

Title here