Day 16: DOM Manipulation

Lesson 4: Changing DOM Elements

Let's say our little todo list app allows a user to use it anonymously or logged in. When they login we would like to show a welcome message that includes their name, like "Welcome back Simon"

Let's look at how we can update just part of the screen to achieve that.

Change your HTML to be this

1<div id="welcome-message">Welcome</div>

and now your JavaScript to This

1const isLoggedIn = true;
2const name = "Simon";
3
4if (isLoggedIn) {
5  const welcomeDiv = document.getElementById("welcome-message");
6  welcomeDiv.innerText = `Welcome back ${name}`;
7}

To test that it is working change the isLoggedIn value to false and see the message change.

Pretty cool right?