JS DOM: Create, Insert HTML Element

By Xah Lee. Date: . Last updated: .

This page shows you how to use JavaScript to create an HTML element and insert it into a page.

Example

Press the following button to see a paragraph element inserted.

Code

<button id="button69908" type="button">Click Me</button>
const button69908 = document.getElementById("button69908");

const ff = () => {
 const newNode = document.createElement("p");
 newNode.appendChild(document.createTextNode("hello"));
 button69908.insertAdjacentElement("afterend", newNode);
};

button69908.addEventListener("click", ff);

JS DOM Common Task Examples