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

Simple DOM Examples

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

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