The createElement() method in JavaScript allows you to create a new HTML element dynamically. This built-in function creates an HTML element of the specified tag name and returns a reference to the new element, which you can then manipulate using other JavaScript methods.
Here’s the syntax of the createElement() method:
document.createElement(tagName);
Where tagName is a string representing the name of the HTML element you want to create.
For example, if you want to create a new div element, you can use the following code:
const newDiv = document.createElement("div");
Once you have created a new element using createElement(), you can add it to your web page using the appendChild() method or other similar methods.
JavaScript createElement() Method example
A simple example code demonstrates how to use the createElement() method to create a new HTML element dynamically and append it to the web page:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript createElement() Method</title>
</head>
<body>
<p>Click the button to create a new div element.</p>
<button id="create-button">Create Div Element</button>
<script>
// Select the button element
const createButton = document.querySelector("#create-button");
// Add a click event listener to the button
createButton.addEventListener("click", function() {
// Create a new div element
const newDiv = document.createElement("div");
// Set the class attribute of the div element
newDiv.setAttribute("class", "my-class");
// Set the text content of the div element
newDiv.textContent = "This is a new div element!";
// Append the new div element to the body of the web page
document.body.appendChild(newDiv);
});
</script>
</body>
</html>
Output:
Use the insertBefore() method to insert a newly created HTML element before an existing element in the web page:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript insertBefore() Method Example</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<script>
// Create a new div element
const newDiv = document.createElement("div");
newDiv.textContent = "This is a new div element!";
// Select the second paragraph element
const secondPara = document.querySelector("p:nth-of-type(2)");
// Insert the new div element before the second paragraph
document.body.insertBefore(newDiv, secondPara);
</script>
</body>
</html>In this example, we insert the new div element before the second paragraph element, so the new element will be displayed between the first and second paragraphs.
Comment if you have any doubts or suggestions on this Js create element topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version