JavaScript: Insert HTML Element Example

Xah Lee, 2006-02-28, …, 2013-04-13

This page shows a example of how to add HTML content using Document Object Model.

Press the following button to see a paragraph element inserted.

Here's the HTML code:

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

Here's the JavaScript code:

function f1 (eventObj) {

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

 // reference node
 var refNode = eventObj.target; // the HTML element of the event

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

document.getElementById("b1").addEventListener("click", f1 , false);

Note that the insertBefore method inserts nodes as children. That is:

‹nodeA›.insertBefore(‹new node›, ‹ref node›)

will insert ‹new node› as a child of ‹nodeA›, at a position before ‹ref node›. So, ‹ref node› must be a child of ‹nodeA›.

https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore