Why should you care?

This is how you build interactive pages without reloading — update one div when data changes.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

<p id="msg">Hello</p>
<button id="btn">Change text</button>
<script>
  document.getElementById("btn").addEventListener("click", () => {
    document.getElementById("msg").textContent = "You clicked!";
  });
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• getElementById finds one element.
• addEventListener("click", ...) runs your function when clicked.
• textContent sets plain text safely.

Practice next

1. Save dom.html and open in browser.
2. Click button and see text change.
3. Try classList.add on the paragraph.
4. Create a new li element with createElement and appendChild.
5. Toggle a CSS class on click instead of changing text every time.

Remember

document.getElementById addEventListener for clicks textContent to change text

ScriptVerse sidebar nav

JavaScript toggles active class on nav links when users click without server round-trip.

Outcome: DOM updates power every interactive ScriptVerse screen without full reloads.