Change Content

Change Content

🧠 1. The Three Main Ways to Change Content

Once you’ve selected an element, you can change its content using:

PropertyPurposeExample Output
textContentChange or read only text“Hello World”
innerHTMLChange or read HTML inside<b>Hello</b>
innerTextChange text but respects CSS visibility“Visible text only”

1️⃣ textContent

Use when you just want to set or get plain text — not HTML.

<h1 id="title">Old Title</h1>

<script>
  const title = document.querySelector("#title");
  title.textContent = "New Title";
</script>

✅ It replaces only the text.
✅ It’s safe — doesn’t parse HTML.

Example:

title.textContent = "<b>Hello</b>";
// Output: <b>Hello</b> (literally as text)

2️⃣ innerHTML

Use when you want to insert HTML elements dynamically.

<div id="content"></div>

<script>
  const content = document.querySelector("#content");
  content.innerHTML = "<p><strong>Hello</strong> World!</p>";
</script>

✅ It parses HTML inside the string.
⚠️ Be careful when inserting user-generated content, as it can create XSS vulnerabilities.

3️⃣ innerText

Similar to textContent, but:

  • It respects CSS styling (hidden elements won’t be included).
  • It triggers layout reflow (slightly slower).
  • Often used for visible text.
const para = document.querySelector("p");
console.log(para.innerText); // Text visible on screen only

🧩 4. Adding or Appending Content

Instead of replacing, you can append content.

append()

Appends a node or text to the end of an element.

const list = document.querySelector("ul");
const item = document.createElement("li");
item.textContent = "New Item";
list.append(item);

✅ You can append multiple elements or strings at once:

list.append("End", item);

prepend()

Adds content to the beginning of an element.

list.prepend("Start");

insertAdjacentHTML()

Adds HTML relative to an element’s position.

element.insertAdjacentHTML(position, text);

Positions:

  • "beforebegin"
  • "afterbegin"
  • "beforeend"
  • "afterend"

Example:

const div = document.querySelector(".box");
div.insertAdjacentHTML("beforeend", "<p>Added inside!</p>");

⚙️ 5. Removing and Replacing Content

remove()

Deletes the element itself.

document.querySelector(".ad-banner").remove();

replaceChildren()

Clears and replaces children in one go.

const box = document.querySelector(".box");
const newPara = document.createElement("p");
newPara.textContent = "Replaced!";
box.replaceChildren(newPara);

💡 6. Example — Dynamic Update

<div class="container">
  <h2 class="title">Old Heading</h2>
  <button id="change">Change Text</button>
</div>

<script>
  const title = document.querySelector(".title");
  const button = document.querySelector("#change");

  button.addEventListener("click", () => {
    title.textContent = "New Heading Updated!";
  });
</script>

✅ Clicking the button instantly changes the heading text.

🔍 7. Bonus: Working with Attributes

Sometimes, you want to change content-related attributes like images or links.

<img id="photo" src="old.jpg" alt="Old Image">

<script>
  const img = document.querySelector("#photo");
  img.setAttribute("src", "new.jpg");
  img.alt = "New Image"; // simpler way
</script>

⚡ 8. Summary

TaskMethodExample
Change texttextContentel.textContent = "New text"
Change HTMLinnerHTMLel.innerHTML = "<b>Hi</b>"
Add to endappend()el.append(newEl)
Add to startprepend()el.prepend(newEl)
Insert HTMLinsertAdjacentHTML()el.insertAdjacentHTML("beforeend", "<p>Text</p>")
Removeremove()el.remove()
Replace childrenreplaceChildren()el.replaceChildren(newEl)

Leave a Reply