∑ Home ◇ Math ◇ Computing ◇ Arts ◇ Words ◇ Literature ◇ Music ◆

Changing HTML Content with Javascript

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

This page shows a example of how to change a HTML page's content with javascript. Press the following buttons to change the “howdy” paragraph.

How are you?

Here's the html code.

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

Here's the js code.

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

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