JavaScript

One of the most powerful features of JavaScript is its ability to dynamically change the content of a webpage using the HTML DOM (Document Object Model). You can use JavaScript to modify text, replace HTML, or add new elements in real time.

---

🧠 What Does “Changing HTML” Mean?

When we say “changing HTML,” it usually means:

• Updating the content inside an element
• Replacing existing HTML with new HTML
• Adding/removing elements
• Changing attributes like href, src, or alt

All of this can be done using the document object in JavaScript.

---

✅ Common Ways to Change HTML

Task	Method/Property
Change HTML content	element.innerHTML
Change text only	element.textContent
Replace an element	element.outerHTML
Add HTML inside (end/start)	element.insertAdjacentHTML()
Create new element	document.createElement()

---

📝 1. Using innerHTML

➕ Add or change the HTML content inside an element

<p id="demo">Old content</p>

<script>
  document.getElementById("demo").innerHTML = "<strong>New bold content!</strong>";
</script>

🧠 Note: innerHTML parses the string as HTML.

---

📝 2. Using textContent

➕ Change only text (no HTML rendering)

<p id="demo">Hello</p>

<script>
  document.getElementById("demo").textContent = "<i>This will not be italic</i>";
</script>

📌 This treats everything as plain text, not HTML.

---

📝 3. Using outerHTML

🔄 Replace the element itself

<div id="box">Box</div>

<script>
  document.getElementById("box").outerHTML = "<section>Replaced!</section>";
</script>

---

📝 4. Using insertAdjacentHTML()

You can insert HTML before or after specific positions:

element.insertAdjacentHTML(position, html);

📍 Positions:

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

Example:

<ul id="list">
  <li>Item 1</li>
</ul>

<script>
  const ul = document.getElementById("list");
  ul.insertAdjacentHTML("beforeend", "<li>Item 2</li>");
</script>

---

🧪 Full Example: Dynamic Update

<div id="info">Welcome!</div>
<button onclick="changeHTML()">Click to Change</button>

<script>
  function changeHTML() {
    const el = document.getElementById("info");
    el.innerHTML = "<h2>Hello from JavaScript!</h2>";
    el.style.color = "crimson";
  }
</script>

---

⚠️ Warning with innerHTML

• Be careful when inserting user input using innerHTML – it can lead to XSS (Cross-Site Scripting) attacks.
• Always sanitize user data before inserting it into HTML.

---

🔚 Conclusion

Changing HTML with JavaScript gives you the power to:

• Update page content without reloading
• Add animations or transitions
• Create interactive UI components

It’s a core skill for every frontend developer and key to mastering DOM manipulation.

---