Changing Text, HTML, and CSS with JavaScript

Now that we can respond to user actions with addEventListener, it’s time to learn how to actually change the page when something happens. This lesson will show how to change text, edit HTML content, and update styles directly from JavaScript.

Changing Text on the Page

Every element on a webpage, like a paragraph or heading, can have its text changed using JavaScript.

You can do this using either the textContent or innerHTML property. They both change what appears inside an element, but they work a little differently.

Here is a simple example. When you click the button, the paragraph text updates instantly.
This is one of the simplest and most common ways to make your page dynamic.

<body>
  <p id="message">This is the original message.</p>
  <button id="btnChange">Change Text</button>

  <script src="script.js"></script>
</body>