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

Inserting HTML Content With Javascript

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

This page shows a example of how to add HTML content using Document Object Model. If you are not familiar with js, see: Javascript Basics.

Press the following button to see a paragraph inserted.

Here's the html code:

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

Here's the js code:

function f1() {

 // create node
 var newNode = document.createElement("p");
 newNode.appendChild(document.createTextNode("Thank you!"));

 // reference node
 var refNode = document.getElementById("b1")

 // insert before
 refNode.parentNode.insertBefore(newNode, refNode);
}

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