This blog explains the procedure to create a new “h1” element with the help of JavaScript methods.
How to Create a New “h1” Element Using JavaScript?
The “h1” element is created using JavaScript to generate multiple headings programmatically instead of manually coding each one, which saves a lot of time and effort. It also allows the programmer to encapsulate the logic for generating headings into reusable functions or components.
There are three methods or techniques by which JavaScript can create a new “h1” element. These methods are defined below along with practical demonstration:
- Using “createElement()” and “appendChild()” Methods
- Using the “innerHTML” Property
- Using “insertAdjacentHTML()” Method
Method 1: Using “createElement()” and “appendChild()” Methods
The “createElement()” and “appendChild()” methods can be utilized in combination for the creation of HTML elements like “h1”. The “createElement()” method dynamically creates the specified HTML elements, and the “appendChild()” method is used to append or insert the newly created HTML element into the DOM tree. For instance, visit the below code block:
<hr>
<script>
var demo1 = document.createElement("h1");
var placing = document.createTextNode("The Heading One is Creaated");
demo1.appendChild(placing);
document.body.appendChild(demo1);
</script>
In the above code block:
- First, the “h1” HTML element is created with the help of the “createElement()” method and stored in a “demo1” named variable.
- Next, a node is created that contains a dummy message and is inserted in the DOM tree by utilizing the “appendChild()” method.
- In the end, the “demo1” gets displayed on the webpage by appending the “h1” element in the body tag using the “appendChild()” method.
After the compilation:
The above snapshot of the browser confirms that the “h1” element has been created using JavaScript.
Method 2: Using “innerHTML” Property
The “innerHTML” property is widely used to insert or update the HTML content of an element in the most simplified and easiest manner. For instance, in the below code the “h1” element is being inserted on the webpage using the “innerHTML” property:
<hr>
<div id="root"></div>
<script>
var demo2 = document.getElementById("root");
demo2.innerHTML = "<h1>The Heading One is Created</h1>";
</script>
In the above code snippet, the reference of the targeted HTML element is stored in a variable on which the new “h1” element gets printed. Then, the “innerHTML” property is attached to the variable, and the “h1” element along with the dummy data is stored in it. This data gets displayed in the location specified inside the variable created above.
After the compilation:
The output shows that the “h1” element has been created dynamically using JavaScript.
Method 3: Using “insertAdjacentHTML()” Method
Another way to insert HTML elements like “h1” is by using the “insertAdjacentHTML()” method. This method accepts four values namely, “afterbegin”, “afterend”, “beforeend”, and “beforebegin”. These values specify the position where the new or selected element needs to be inserted on the webpage, as shown below:
<div id="root"></div>
<script>
var demo3 = document.getElementById("root");
demo3.insertAdjacentHTML("beforeend", "<h1>Heading is created using insertAdjacentHTML() method</h1>");
</script>
In the above code snippet:
The “insertAdjacentHTML()” method is utilized along the variable that stores the reference to a random element. This accepts two parameters; the first parameter shows the position relative to the specified HTML element whose reference is stored in the already described variable. And the second contains the data that need to be inserted. In our case, we are inserting the “h1” element.
After the compilation:
The output shows that the “h1” element has been created using the JavaScript “insertAdjacentHTML()” method.
Conclusion
The creation of a new HTML element like “h1” using JavaScript is very helpful, as it can manipulate the DOM, create, modify, and interact with HTML elements dynamically. There are three methods that can be utilized for creating new HTML elements, these are “createElement() and appendChild()” methods, the “innerHTML” property, and the “insertAdjacentHTML()” method. This post has illustrated the methods to generate a new “h1” element using JavaScript.
