If you enjoyed this site, please consider donating $3. Any amount is appreciated. Thanks!

Changing HTML Content with JavaScript

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.

Howdy?

Here's the code.

<p id="t">Howdy?</p>
<div id="b1" class="button">Answer</div>
<div id="b2" class="button">Question</div>

function f1() {document.getElementById("t").firstChild.nodeValue="Fine!";}
function f2() {document.getElementById("t").firstChild.nodeValue="Howdy?";}

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

Related essays:

• Changing a Element's Style with JavaScript
• Adding HTML Content with JavaScript
• Tab Menu with JavaScript
• Tab Menu with CSS