1. Change Text (innerText)

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

<script>
  // Syntax: element.innerText = "value"
  document.getElementById("title")
          .innerText = "New Text";
</script>

What is this?

innerText updates the visible text inside an element. It "wipes out" the old content and replaces it with your new string instantly.

2. Change Styles (CSS)

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

<script>
  // Syntax: element.style.property = "value"
  document.getElementById("text")
          .style.color = "green";
  
  document.getElementById("text")
          .style.fontSize = "30px";
</script>

What is this?

JavaScript can update CSS properties. **Note:** In JS, CSS properties with hyphens (like font-size) use **camelCase** (fontSize).

3. Change Attributes

<img id="image" src="img1.jpg">

<script>
  // Syntax: element.attribute = value
  document.getElementById("image")
          .src = "img2.jpg";

  document.getElementById("image")
          .alt = "New Image Description";
</script>

What is this?

You can change non-text properties like an image's src, a link's href, or an input's placeholder. This is how "Dark Mode" icons usually work!