Changing DOM Content

Table of Contents +

In the previous lesson, we learned how to select elements on the page. Now let’s change what those elements show, from the text inside them to the attributes that control them.

✏️ Changing Text with textContent

Once you have selected an element, the textContent property lets you read and change the plain text inside it. Assigning a new string replaces whatever text was there before.

changing-content.js
const heading = document.querySelector("h1");
heading.textContent = "Welcome back!";

Here’s what each line does:

  • The first line selects the page’s <h1> element and stores it in the heading variable.
  • The second line assigns a new string to heading.textContent, replacing the old heading text with “Welcome back!”.

The browser treats the new value as plain text, so any HTML symbols like < or > show up exactly as typed instead of becoming tags. This makes textContent the safe default for putting text on the page.

🧱 Changing Markup with innerHTML

The innerHTML property changes the HTML markup inside an element. The browser parses the string and turns it into real elements.

changing-content.js
const box = document.querySelector("#message");
box.innerHTML = "<strong>Saved</strong> your changes.";

Let’s walk through it:

  • The first line selects the element with the id message and stores it in box.
  • The second line assigns a string containing a <strong> tag to box.innerHTML, so the browser parses it and renders “Saved” in bold followed by ” your changes.”

Use innerHTML only when you actually need to insert tags, and only with content you control.

innerHTML can be dangerous

Never set innerHTML from user input or other untrusted data. A malicious string can inject scripts and attack your visitors. When you only need text, use textContent instead.

📊 textContent vs innerHTML

Both change what is inside an element, but they treat the value differently.

Property Treats value as Use when Safe with user input
textContent Plain text You just need to show text Yes
innerHTML HTML markup You need to insert tags No

🔗 Changing Attributes

Elements also have attributes such as src, href, and value. You can change these with setAttribute, or directly through matching properties on the element.

changing-content.js
const link = document.querySelector("a");


// ✅ Direct property
link.href = "https://example.com";


// ✅ setAttribute does the same thing
link.setAttribute("href", "https://example.com");

Here’s what each line does:

  • The first line selects the page’s <a> element and stores it in link.
  • Setting link.href directly updates the link’s destination through its property.
  • Calling link.setAttribute("href", ...) changes the same href attribute by name, giving the identical result.

Common attribute changes look like this:

changing-content.js
const image = document.querySelector("img");
image.src = "logo.png"; // swap the picture


const field = document.querySelector("input");
field.value = "Alex"; // set the text in an input

Let’s break it down:

  • The first two lines select an <img> and set its src to logo.png, which swaps the displayed picture.
  • The last two lines select an <input> and set its value to “Alex”, which fills the field with that text.

Inputs use value, not textContent

The text a user types into an <input> lives in its value property, not in textContent. Read and change input text through value.

🖱️ A Practical Example

This example combines selecting an element, listening for a click, and changing content. Clicking the button updates the message text.

changing-content.js
const button = document.querySelector("#save");
const status = document.querySelector("#status");


button.addEventListener("click", () => {
  status.textContent = "Your work has been saved.";
});

Here’s how it works, step by step:

  • The first two lines select the button with the id save and the status element with the id status.
  • button.addEventListener("click", ...) tells the button to run the given function every time it is clicked.
  • Inside that function, status.textContent is replaced with the confirmation message “Your work has been saved.”

⚠️ Common Mistakes to Avoid

Mistake Problem Solution
Using innerHTML for plain text Opens the door to script injection Use textContent unless you need tags
Changing content before selecting The element is null, so it throws an error Select the element first, then change it
Setting textContent on an input The field stays empty Set value to change input text

🔧 Try It Yourself!

  1. Select a heading and change its text with textContent.
  2. Select an element and add a bold word inside it with innerHTML.
  3. Select an <img> and swap its picture by changing src.
  4. Add a button that updates a message element’s text when clicked.

🧩 What You’ve Learned

  • ✅ textContent changes the plain text inside an element and is the safe default
  • ✅ innerHTML changes the HTML markup but is risky with untrusted input
  • ✅ setAttribute and direct properties like src and href change attributes
  • ✅ Inputs hold their text in value, not textContent
  • ✅ You must select an element before you can change it

🚀 What’s Next?

Now that you can change what an element shows, let’s change how it looks. Let’s continue to Changing Styles.

Previous Selecting DOM Elements Next Changing DOM Styles

Share & Connect

Share on LinkedIn