Day 20 of Learning Web Development — I Learned How to Add and Remove Elements Dynamically

For the past 19 days, I’ve been learning web development step by step.

HTML for structure. CSS for design. JavaScript for interactivity. User input. Dynamic content updates.

Yesterday, I stopped using alert boxes and started updating content directly on the page.

That felt like real progress.

But today, I wanted to go further.

I wanted to create things dynamically.

Not just change existing text.

But actually add new elements to the page.

And remove them too.

This made JavaScript feel much more powerful.

🚀 Why Dynamic Elements Matter

Until now, everything already existed in HTML.

I could:

• Change text
• Show messages
• Update content

But real apps do more.

They create things.

Think about:

• To-do lists
• Comments
• Notifications
• Messages

These are added dynamically.

So I asked myself:

“Can I create new elements using JavaScript?”

That became my goal today.

🧠 What I Focused On Today

I kept things practical:

• Creating elements
• Adding them to the page
• Removing elements

Simple actions.

Big results.

📦 Step 1 — Creating a New Element

First, I learned this:

let newItem = document.createElement("p");

👉 This creates a new paragraph element.

At first, it exists only in JavaScript.

Not on the page yet.

💡 Big Realization

This felt powerful.

Because now:

👉 I can create HTML using JavaScript

🔥 Step 2 — Adding Text Inside It

Then I added content:

newItem.textContent = "This is a new paragraph";

Now the element has text.

📍 Step 3 — Adding It to the Page

This was the key part:

document.body.appendChild(newItem);

👉 Now it appears on the page.

And honestly…

This felt like magic.

🖱️ Step 4 — Creating It with a Button Click

I made it interactive:

document.querySelector("button").onclick = function() {
  let newItem = document.createElement("p");
  newItem.textContent = "New task added!";
  document.body.appendChild(newItem);
};

🤯 What Happened

Every click:

👉 Adds a new paragraph

This felt like a real app.

❌ Step 5 — Removing Elements

Then I learned:

newItem.remove();

👉 This deletes the element.

Simple.

But very useful.

🧪 My Mini Project — Simple To-Do Style Practice

Today I built:

• Input field
• Button
• New task added to page

Example:

• Type: “Study JavaScript”
• Click → task appears

This was small.

But exciting.

⚠️ What Felt Difficult

Let’s be honest.

Today had challenges:

• Forgetting appendChild()
• Removing the correct element
• Understanding where elements are added

Sometimes things appeared in the wrong place.

💡 What Helped Me

I slowed down and checked:

• Where is the element created?
• Where is it added?
• Which element should be removed?

That made debugging easier.

🧠 What I Realized Today

This was a big moment:

JavaScript doesn’t just control HTML.

It can create HTML.

That changes everything.

🎯 What I Learned Today

• createElement() creates new elements
• appendChild() adds them to the page
• remove() deletes them
• Dynamic content makes websites feel alive

🔥 What’s Next?

Now that I can create elements dynamically…

Tomorrow, I want to:

Build a small real project like a To-Do List using everything I’ve learned so far.

This will be my first real JavaScript mini project.

💬 Final Thoughts

Day 20 felt powerful.

Because now…

I’m not just editing pages.

I’m building experiences.

If you’re learning web development too, don’t stop at text changes.

Start creating things dynamically.

That’s where real development begins.