JavaScript Simplified · One concept, one day, one project · Day 14 of 32

Changing HTML and Text

Updating a page’s content from JavaScript, and the important difference between plain text and HTML. You build a profile card that JavaScript fills in.

By the end of today you can

Set plain text safely with textContent
Insert HTML with innerHTML, and know when it is risky
Update several elements to build one card
Build a dynamic profile card

Yesterday you changed one piece of text. Real pages update many parts at once: a card with a name, a job, a description, a status. Today you fill a whole card from JavaScript, and learn the two ways to put content in.

1. textContent: plain text

textContent sets the text inside an element. Anything you give it is shown exactly as text, even if it looks like HTML. That makes it the safe default.

What this code doestextContent shows exactly what you give it, as text.

index.html

<p id="out">...</p>

app.js

1
2

const out = document.getElementById("out");
out.textContent = "Bold tags like <b>this</b> show as plain text.";

BROWSERindex.html  ·  after the script runs

The <b> did not turn into bold; it showed as characters. textContent treats everything as text, which is exactly what you want for user-supplied content.

2. innerHTML: real HTML

innerHTML sets the HTML inside an element. Tags you give it become real elements. This is powerful for building content, and risky for content that came from a user.

What this code doesinnerHTML turns the tags into real HTML.

index.html

<p id="out">...</p>

app.js

1
2

const out = document.getElementById("out");
out.innerHTML = "This word is <b>bold</b> for real.";

BROWSERindex.html  ·  after the script runs

Be careful with innerHTML and user input

Because innerHTML runs any tags you give it, putting text a user typed straight into innerHTML can let them inject unwanted HTML or scripts. Rule of thumb: use textContent for anything a user typed; use innerHTML only for content you control.

Today’s Mini Project

📰 Dynamic Profile Card

A blank card that JavaScript fills in: name, job, description and a status. You update several elements from one script, the way a real profile page loads.

What this code doesJavaScript fills every field of the card.

index.html

<div class="card">
  <h2 id="pName">...</h2>
  <p id="pJob">...</p>
  <p id="pDesc">...</p>
  <span id="pStatus">...</span>
</div>

style.css

1
2
3

.card{border:1px solid #ccc;border-radius:10px;padding:16px;max-width:320px}
#pName{margin:0 0 4px}#pJob{color:#0a6e6e;margin:0 0 8px;font-weight:bold}
#pStatus{background:#e3f5ee;color:#0a6e6e;padding:2px 10px;border-radius:999px;font-size:13px}

app.js

// one object holds the profile data
const profile = {
  name: "Ada Obi",
  job: "Frontend Developer",
  desc: "Learning to build real web apps on Webbo3.",
  active: true
};

// fill each element from the object
document.getElementById("pName").textContent = profile.name;
document.getElementById("pJob").textContent = profile.job;
document.getElementById("pDesc").textContent = profile.desc;
document.getElementById("pStatus").textContent = profile.active ? "Active" : "Away";

BROWSERindex.html  ·  after the script runs

Notice how Week 3 comes back: the data is an object, and a ternary picks the status word. The DOM is where all the earlier layers finally show up on screen.

Challenge (15 minutes)

Add an avatar letter: a circle showing the first letter of the name, set with profile.name[0]. Expected: a circle with "A" for Ada.

Try This

Change active to false and reload in your head: what does the status show?

Expected: "Away". The ternary reads the boolean and picks the matching word.

Picture This

A profile page, a product card, a dashboard tile: all of them are empty HTML that JavaScript fills from data. You just built that pattern, the one behind most pages you use every day.

Checkpoint

What is the difference between textContent and innerHTML?

textContent sets plain text; tags show as characters. innerHTML sets real HTML; tags become elements. Use textContent for user input, innerHTML only for content you control.

Why is innerHTML risky with user input?

Because it runs any tags given to it. If a user’s text goes straight into innerHTML, they could inject unwanted HTML or scripts. textContent avoids this by treating everything as text.

How do you fill several parts of a card from one script?

Select each element by its id and set its textContent, one after another, usually from a single data object.

Tick Before You Move On

☐ I can set plain text with textContent
☐ I can set HTML with innerHTML and know when it is risky
☐ I can fill several elements from one object
☐ I built the Dynamic Profile Card

Quick Recap

textContent sets text exactly; innerHTML sets real HTML. Use textContent for user input; innerHTML only for content you control. A card is empty HTML filled by JavaScript from data. Objects and ternaries from Week 3 come back here on the page.

Next: Day 15. You have changed content. Tomorrow you change the look: colours, themes and classes, with JavaScript.

Changing HTML and Text

1. textContent: plain text

2. innerHTML: real HTML

Today’s Mini Project

Checkpoint

Learn this with a real instructor