How do I actually create a new element and get it to show up on the page?

Creating an element is a two-step process. First, you use document.createElement('tagName'), but here is the part that trips people up: that element exists only in JavaScript's memory. It's like building a piece of furniture in your garage; it doesn't magically appear in your living room just because you finished building it.

To make it visible, you have to attach it to an element that is already part of the DOM. Usually, we use appendChild() or prepend(). Let's say we're building a notification system. Here is how I'd handle it:

const notification = document.createElement('div');
notification.textContent = "Your file has been uploaded!";

// Assuming we have a div with id="notification-container" in our HTML
const container = document.getElementById('notification-container');
container.appendChild(notification);

Should I add classes and text before or after I append the element?

I always recommend doing all your "dressing up" first. Set the text, add the CSS classes, and attach any event listeners before you call appendChild(). Why? Because every time you modify an element that is already in the DOM, the browser might have to recalculate the layout or repaint the screen. If you do it all in memory first and then append it once, it's much more efficient.

Look at the difference here:

const toast = document.createElement('div');

// Do all the setup first
toast.classList.add('toast-notification', 'success');
toast.textContent = "Settings saved successfully!";
toast.style.backgroundColor = "#d4edda";

// Now, one single DOM operation to put it on screen
document.body.appendChild(toast);

What's the cleanest way to remove an element when I'm done with it?

In the old days, you had to find the parent of the element you wanted to kill and tell the parent to remove the child. It was clunky. Thankfully, modern JavaScript gives us the .remove() method, which you can call directly on the element itself.

If we're sticking with our notification example, we probably want the toast to disappear when the user clicks it. I'd write it like this:

const toast = document.createElement('div');
toast.textContent = "Click me to dismiss";

// The element removes itself from the DOM when clicked
toast.addEventListener('click', () => {
  toast.remove();
});

document.body.appendChild(toast);

Just a heads-up: if you're supporting very ancient browsers (like IE11), .remove() won't work, and you'd have to use parentElement.removeChild(element). But for 99% of modern projects, .remove() is the way to go.

📋 Practical Task

Exercise: Building a Dynamic Notification Toast System

Your goal is to create a small system that allows a user to trigger a notification and then dismiss it. Follow these requirements:

• Create an HTML button with the ID add-toast.
• When that button is clicked, create a new div element.
• Give that div a class of toast and set its text to "New Notification Received!".
• Append this div to a container element on the page.
• Add a click event listener to the div itself so that when the notification is clicked, it is removed from the DOM.