JavaScript: Change Element's Content

By Xah Lee. Date: . Last updated: .

There are 3 ways to change a element's content.

[see DOM: textContent, innerHTML, innerText, nodeValue]

Example

Press the following buttons to change the paragraph.

How are you?

Here is the HTML code.

<p id="showBox87134">How are you?</p>
<button id="btn1" type="button">Answer</button>
<button id="btn2" type="button">Question</button>

Here is the JavaScript code.

const showBox87134 = document.getElementById("showBox87134");
const btn1 = document.getElementById ('btn1');
const btn2 = document.getElementById ('btn2');

const f1 = (() => {showBox87134 .innerHTML="Fine, thank you.";});
const f2 = (() => {showBox87134 .innerHTML="How are you?";});

btn1. addEventListener ("click", f1 , false);
btn2. addEventListener ("click", f2 , false);

Note: if you just want to insert text that's not HTML, best to use node.textContent = string

[see DOM: textContent, innerHTML, innerText, nodeValue]

BUY Ξ£JS JavaScript in Depth

Basic DOM Element Methods