JavaScript – Change Text

Changing Text (innerHTML)
JavaScript can change the text inside an element such as <p> or <h1>. To do this, find the element using getElementById(), then modify its innerHTML.

Example

<h1 id="heading">Title</h1>
<p id="text">Text goes here</p>
<script>
let heading = document.getElementById("heading");
let text = document.getElementById("text");
heading.innerHTML = "Fancy Title";
text.innerHTML = "This is a fancy page with fancy info.";
</script>

What innerHTML means
innerHTML is whatever is between the opening and closing tags:

One-line version

document.getElementById("heading").innerHTML = "abc";

Using a variable

<h1 id="heading">Hello</h1>
<script>
let msg = document.getElementById("heading");
msg.innerHTML = "This is some new text.";
</script>

Need help?
If JavaScript cannot find your element (msg is null or causes errors), review the Finding Elements with getElementById() page.

Where to put your script
Place your <script> at the end of the <body> section. If the script runs before the elements exist, getElementById() returns null.

The original version of this page is human written. This streamlined version was created by ChatGPT with the guidance, editorial scrutiny, and approval of the human creator of this website.