Day 3: Session 2: JavaScript DOM Manipulation + Template Literals

Hey again!! Welcome to Session 2 of Day 3.

Today we’re moving into JavaScript and learning how to:

1.Select DOM elements
2.Update, create, remove elements
3.Add attributes from JavaScript (not HTML)
4.Use a tags in JS to navigate pages
5.Understand and use template literals

1.DOM Select:

The DOM (Document Object Model) is how JavaScript interacts with HTML.

Selecting elements:

// By ID
const title = document.getElementById('title');

// By class
const cards = document.querySelectorAll('.card');

// By tag
const buttons = document.getElementsByTagName('button');

2.DOM Update:

Change text or HTML content:

title.textContent = 'New Title';
title.innerHTML = '<span>Styled Title</span>';

Change styles:

title.style.color = 'red';
title.style.fontSize = '24px';

3.DOM Create:

Create a new element:

const newCard = document.createElement('div');
newCard.classList.add('card');
newCard.textContent = 'I am a new card!';
document.body.appendChild(newCard);

Add inside a specific container:

const grid = document.querySelector('.product-grid');
grid.appendChild(newCard);

4.DOM Remove:

Remove an element:

const cardToRemove = document.querySelector('.card');
cardToRemove.remove();

Or remove a child:

grid.removeChild(cardToRemove);

5.Add Attributes (from JavaScript, not HTML)

||Example: Add an <a> tag and set href in JS

const link = document.createElement('a');
link.textContent = 'Go to Next Page';
link.setAttribute('href', 'nextpage.html');
document.body.appendChild(link);

Clicking the link navigates to the next page!

This way, you don’t need to write the <a> tag in HTML — you can fully control it from JavaScript.

6.Template Literals (Brief Intro)

What are they?
Template literals let you write strings with embedded variables and expressions, using backticks ().

||Example:


const productName = "Phone";
const price = 299;
const message = "The ${productName} costs $${price}";
console.log(message);

Why use them?

• Easier multiline strings
• Cleaner string + variable combinations
• Avoids messy ' + variable + ' patterns

Multiline Example:


const html =
<div class="card">
<h2>${productName}</h2>
<p>Price: $${price}</p>
</div>

Recap of Today’s Session 2

1.We learned how to select, update, create, remove DOM elements.
2.We controlled attributes like href directly from JavaScript.
3.We introduced template literals for cleaner, more powerful string handling.

Keep Learning..Happy Coding!!!