Dynamic content

Scheduled

Planned for Jan 26 – Delivered on TBD

Learning Outcome Guide

At the end of this class, you should be able to…

• Create and insert new HTML elements into the DOM using JavaScript.
• Traverse the DOM tree to select parent, child, and sibling elements.
• Remove and replace elements dynamically within the DOM.
• Apply dynamic updates to element attributes and styles.
• Use built-in timers to execute functions.

The focus of this lesson is on navigation of the DOM using API calls and element relationships. Basic implementation of setTimeout and setInterval should also be

Students must read chapter 10 of JSFBP

---

Coding Demo

In-Class Demo Jan 2026 term

To run the coding demo, you need to have your Student Workbook open in Visual Studio Code.

1. Open the terminal window and paste in the following.

   Run from the root of your repository

   pnpm dlx tiged --disable-cache --force DG-InClass/SDEV-1150-A04-Jan-2026/sk/lesson-06 ./src/lesson-06

2. Walk through the steps in the ReadMe.md of the new lesson.

---

Walkthrough

Install dependencies and run the dev server

1. Move into the lesson-06/ directory:

cd lesson-06

2. Install the necessary dependencies:

npm install

or

npm i

3. Run the dev server with the dev script:

npm run dev

4. Open the provided development server URL in your browser
5. You should see the default render for the vite project.
6. Use this as the base for today’s examples.

Instructor Demo and Student Exercise

Complete the demo along with your instructor and then attempt the exercise prompts (see the comments in the main.js file).

Selecting elements (including the feature list)

const titleEl = document.querySelector('#page-title');
const taglineEl = document.querySelector('.tagline');
const heroImg = document.querySelector('#hero-img');
const heroCaption = document.querySelector('#hero-caption');
const dynamicBox = document.querySelector('#dynamic-box');
const footerNote = document.querySelector('#footer-note');

// new for Lesson 06
const featureList = document.querySelector('#feature-list');

console.log('Selected elements:', { titleEl, taglineEl, heroImg, heroCaption, featureList, dynamicBox, footerNote });

Add a new list item dynamically

const li = document.createElement('li');
li.className = 'feature';
li.textContent = 'Flexible';
featureList.appendChild(li);

Retrieve all list items and update their text

const features = document.querySelectorAll('.feature');
features.forEach((li, idx) => {
  li.textContent = `${idx + 1}. ${li.textContent}`;
});

Remove the first item and update neighbors

// remove the first element
featureList.removeChild(featureList.firstElementChild);

// update the second item using nextElementSibling
featureList.firstChild.nextElementSibling.textContent += ' (updated)';

Move the last item to the front

const last = featureList.removeChild(featureList.lastChild);
featureList.insertBefore(last, featureList.firstChild);

Add an item after a delay using a timer

setTimeout(() => {
  const newLi = document.createElement('li');
  newLi.className = 'feature';
  newLi.textContent = 'I am new! (added after 3 seconds)';
  featureList.appendChild(newLi);
}, 3000);

Push to your GitHub workbook repo

Once you’re done making your own custom updates to the project, stage your files, commit your work, and push to the remote repository.

1. Open a terminal in VS Code
2. Stage all updated and created files:

git add .

3. Commit the changes:

git commit -m 'Lesson 06 Example'

4. Push your changes to the remote workbook repository:

git push origin main