JavaScript: 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.


Press the following buttons to change the paragraph.

How are you?


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);

Simple DOM Examples

  1. JavaScript: Change CSS
  2. JavaScript: Change Element's Content
  3. JavaScript: Create HTML Element
  4. JavaScript: Remove HTML Element

  1. JavaScript: document.write
  2. JavaScript: Image Rollover
  3. JavaScript: Pop-up New Window
  4. JavaScript: Digital Clock
  5. JavaScript: Stopwatch
  6. JavaScript: Fade a Element
  7. JavaScript: Fade a Element Using CSS Transition
  8. JavaScript UI: Shake Element
  9. JavaScript: How to Create Tooltip
  10. JavaScript: Falling Snow Effect
  11. JavaScript Floating Box Following Scroll
Like what you read? Buy JavaScript in Depth
or, buy something from my keyboard store