Day 3: Creating & Removing Elements

Daily Objective

Dynamically instantiate new DOM nodes and remove existing elements from the page.

1. Creating Nodes

const newCard = document.createElement('div');
newCard.classList.add('card');
newCard.textContent = 'Dynamic Card Content';

const container = document.querySelector('.container');
container.append(newCard); // attaches to page

// Removing
// newCard.remove();

Daily Hands-on Practice (70%)

1. Build a list item generator that appends a new <li> every time a button is clicked.