JavaScript: How to Change Element's Content

By Xah Lee. Date: . Last updated: .

This page shows a example of how to change a HTML page's content with JavaScript.

Sample

Press the following buttons to change the paragraph.

How are you?

Code

Here's the HTML code.

<p id="id57512">How are you?</p>
<button id="b1" type="button">Answer</button>
<button id="b2" type="button">Question</button>

Here's the JavaScript code.

function f1() {document.getElementById("id57512").innerHTML="Fine, thank you.";};
function f2() {document.getElementById("id57512").innerHTML="How are you?";};

//define the behavior
document.getElementById("b1").addEventListener("click", f1 , false);
document.getElementById("b2").addEventListener("click", f2 , false);

〔➤see JavaScript: What's the difference between textContent, innerHTML, innerText, nodeValue?

〔➤see JavaScript: Add / Remove Event Handler

Like what you read? Buy JavaScript in Depth.