JavaScript and DOM Manipulation

CSCI 344: Advanced Web Technologies

Spring 2025

1

Announcements

• My office hours today will be from 4:30-5:15PM (I have a conflict)

2

Outline

• Strings and template literals
• DOM functions and properties
• Practice with templates, DOM functions, and loops

3

Outline

• Strings and template literals
• DOM functions and properties
• Practice with templates, DOM functions, and loops

4

Strings and Template Literals

• One of the most common tasks in JavaScript is to build HTML snippets by using string functions..
• Why?
• Because most of the content you display on your site comes from server data.
• Because of this, you need to do a lot of string concatenation:
• document.querySelector("div").innerText = "<p>" + name + "</p>";
• Because concatenation is tedious, template literals were introduced in ES6 to make your life easier.

ES6 Introduced a better way: Client-side templates

• Templates, or “template literals” are strings that allow you to embedded expressions
• They’re convenient for generating larger chunks of HTML from lists of objects
• Uses the “backtick” character (instead of regular single or double quotes) to indicate that you are specifying a template (above the tab key):

` <template goes here> `

• Within the template, expressions represented like this:

${ my_expression }

6

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

More on templates

const name = 'Walter';

console.log( ` A template

can be multiple lines.

It can also evaluate expressions like:

${2 + 2} or� ${name} or

${getTodaysDate()}

` );

7

Example of Data → HTML Workflow

const player = {

name: "Jane",

pic: "http://website.com/avatar.png",

score: 300

};

<div class="card">

<img src="http://website.com/avatar.png">

<p>Jane scored 300 points</p>

</div>

The Data�(from server)

The HTML�(Goal)

You COULD do one big string concatenation...

...but string concatenation is annoying – difficult to read and easy to make mistakes.

�const html = '<div class="card">' +

'<img src="' + player.pic + '">' +

'<p>' + player.name + ' scored ' +

player.score + ' points</p>' +

'</div>';

​

9

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Rewriting previous HTML using template syntax

const html = `

<div class="card">

<img src="${player.pic}">

<p>

${player.name}'s high score is:

${player.score}

</p>

</div>`;

Outline

• Strings and template literals
• DOM functions and properties
• Practice with templates, DOM functions, and loops

11

But how do you change the interface?

Once you build a string representation of some HTML…�

const name = "John";�const snippet = `<p>Welcome ${name}!</p>`;

​

�…you need to teach your program how to inject it into the DOM. There are a few ways to do this:

​

const myElement = document.querySelector("#my_container");

myElement.innerHTML = snippet; // replaces

myElement.insertAdjacentHTML('beforeend', snippet); //appends

12

Other DOM functions & properties

• How to make changes to the DOM (Digital Ocean Reference)
• How to traverse the DOM (Digital Ocean Reference)

13

Outline

• Strings and template literals
• DOM functions and properties
• Practice with templates, DOM functions, and loops

14

Practice Time

Download the Lecture 11 Code

15