JavaScript: Changing HTML Content Example

Xah Lee, 2006-02-28, 2010-10-21

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

Sample

Press the following buttons to change the “howdy” paragraph.

How are you?

Code

Here's the HTML code.

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

Here's the JavaScript code.

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

//define the behavior
document.getElementById("b1").onclick = f1;
document.getElementById("b2").onclick = f2;