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

Adding HTML Content with JavaScript

This page shows a example of how to add HTML content using Document Object Model. Press the following button to see a paragraph inserted.

Click Me

Here's the source:

<p id="b1">Click Me</p>

function f1() {
 var o = document.createElement("p");
 o.appendChild(document.createTextNode("Thank you!"));
 document.body.insertBefore(o, document.getElementById("b1"));
}

document.getElementById("b1").onclick = f1;

Related essays:

• Changing HTML Content using JavaScript
• Changing a Element's Style with JavaScript