JavaScript create element

In this article, we are going to discuss how to create an HTML element via JavaScript. Here, we will see some examples to insert the created element in the document.

Creating elements by HTML is not the only way to create elements. However, for simplicity, many times we create elements directly in the HTML document but using JavaScript, it is also possible to create elements.

The document.createElement() is used to dynamically create an HTML element node with the specified name via JavaScript. This method takes the name of the element as the parameter and creates that element node.

After the creation of an element, we can either use the appendChild() method or insertBefore() method to insert the created element in the document.

We can use the removeChild() method to remove a node and can also use the replaceChild() method to replace the node.

Syntax

This method accepts a single parameter value that is stated as follows:

nodename: It is the mandatory parameter. This parameter is of string type. It specifies the element's name, which we have to create. The element name specified in the parameter will create the element; otherwise, if the specified element's name is not recognized, an unknown HTML element will be created.

The document.createElement() will return the newly created element.

Now, let's see some examples of using the document.createElement() method. Here, we will show two examples. In the first example, we will use the appendChild() method to insert the element in the document, and in the second example, we will use the insertBefore() method to insert an element created by the document.createElement() method.

Example1

In this example, we are using the document.createElement() method to create a new button element. We will insert the created element by using the appendChild() method. Here, there is a fun() method that will create a new button element using the createElement() method. We set the text by using the innerHTML that will be displayed on the top of the button.

Let's see the example given below.

<!DOCTYPE html>
<html>

<head>
	<script>
		function fun() {
			var btn = document.createElement("button");
			btn.innerHTML = "Click me";
			document.body.appendChild(btn);
		}
	</script>
</head>

<body>
<h2> It is an example of using the document.createElement() method. </h2>
<h4> Click the below button to insert a new button element in the document. </h4>
	<button onclick = "fun()"> Create Button </button>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are using the document.createElement() method to create a new button element. Here, we are using the insertBefore() method to insert the created element. There is a div element that has a paragraph child element. The new button element will be inserted before the paragraph child element of the div element.

Let's see the example given below.

<!DOCTYPE html>
<html>
<head>
	<script>
		function fun() {
			var btn = document.createElement("button");
			btn.innerHTML = "Click me";
			
			var element = document.getElementById("d1");
			var child = document.getElementById("p1");
			element.insertBefore(btn, child);
		}
	</script>
</head>
<body>
<h2> It is an example of using the document.createElement() method. </h2>
<h4 id = "heading4"> Click the below button to insert a new button element in the document. </h4>
<div id = "d1">
<p id = "p1"> This is a paragraph. </p>
</div>
	<button onclick = "fun()"> Create Button </button>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the above button, the output will be -

The above screenshot shows that the new button element is inserted before the paragraph element. This is because we have used the insertBeofre() method for inserting the new element created by using the document.createElement() method.

Next TopicJavaScript in operator

← prev next →