30 Days Of JavaScript

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";
4if (isLoggedIn) {
5  const welcomeDiv = document.getElementById("welcome-message");
6  welcomeDiv.innerText = `Welcome back ${name}`;

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

Pretty cool right?


Go Pro?

Upgrade to Pro for quizzes, tracked progress and a completion certificate for just $25 🚀

Want more developer tips, tricks and tools?
Then follow me:
FREE Coding Career Quick Start Guide 🚀
Discover the best way to learn to code, how to land a job and valuable resources to help your journey in this free 15 page value packed guide.
Looking to email me? You can get me on my first name at allthecode.co