1,011
Learn how to create html element in JavaScript in a few different ways
- Using just createElement()
- Object.assign()
- ES6 Backticks
Using Just createElement()
Create a div HTML Element in JavaScript by calling the createElement() method on the document object.
This method takes an argument which will be the HTML Element.
In this case…div.
const box = document.createElement("div"); box.id = "box"; document.body.appendChild(box);Assign it to the constant called box.
Set the id property of box to ‘box‘.
Add it to the DOM hierarchy by calling appendChild() on the document.body object with an argument box.
Let’s add a child element to the box element.
To do that, create a button HTML Element in JavaScript by calling the createElement() method on the document object.
This method takes an argument…
but this time, button.
Assign it to the constant called button.
Add text to the button element by setting a string value to the innerHTML property of it.
Append the button element to the DOM hierarchy by calling the appendChild() method on the document.body object with button as an argument.
To add an ID attribute to the button, set a string value to the id property of button.
const button = document.createElement('button'); button.innerText = 'Button'; button.id = 'button-1'; box.appendChild(button);Finally, add the button element to the box element.
Call the appendChild() method on the box by passing button as an argument.
Try it out! ⛹️
See the Pen Create HTML Element in JavaScript by Raja Tamil (@rajarajan) on CodePen.
Object.Assign()
Learn how to create the same HTML Elements using Object.assign()
Call the assign() method on the object inside appendChild().
Assign method takes two arguments:
- HTML DOM Element that we want to create
- A JavaScript object in which we can use any of the DOM properties such as id, innerHTML, etc.
This is easier than the previous approach if we have a lot properties.
In order to add a child element to the box element, all we have to do is just chain another appendChild() with a button element.
Which is easier and more readable than the first approach.
Try it out! ⛹️
See the Pen Create HTML Element in JavaScript – 2 [EMBED] by Raja Tamil (@rajarajan) on CodePen.
ES 6 Backticks
Learn how to add the same HTML Elements to the DOM hierarchy using ES6 back-ticks which is by far the easiest.
Because, you can literally write HTML code inside JavaScript which is super easy to read and maintain.
Create a constant called box and add a pair of back-ticks. Write your HTML code exactly as you do inside the HTML page.
const box = ` <div id='box'> <button id='button-1'>Button</button> </div>`; document.body.innerHTML = box;Assign it to the innerHTML property of the document.body.
That’s it.
Try it out! ⛹️
See the Pen Create HTML Element in JavaScript – 3 [EMBED] by Raja Tamil (@rajarajan) on CodePen.
The HTML DOM createElement() method is used for creating an HTML element dynamically using JavaScript. It takes the element name as the parameter and creates that element node. You need to use the appendChild() method to have the newly created element as part of DOM .
Syntax
Following is the syntax for createElement() method −
document.createElement(nodename)Example
Let us look at an example for the createElement() method −
Live Demo
<!DOCTYPE html> <html> <body> <h2>createElement() example</h2> <p>Click the below button to create more buttons</p> <button title="createButton()">CREATE</button> <br><br> <script> var i=0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML="BUTTON"+i; var br= document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); } </script> </body> </html>Output
This will produce the following output −
On clicking the CREATE button three times. One click for one button −
In the above example −
We have created a button CREATE that will execute the createButton() method on being clicked by the user.
<button title="createButton()">CREATE</button>The createButton() function creates a <button> element using the createElement() method of the document object. Using the innerHTML, we set the text that will be displayed on the top of the button. We create another element <br> using the createElement() method of the document object. The <button> element and the <br> element are then appended to the document body using the appendChild() method −
var i=0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML="BUTTON"+i; var br= document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); }
Updated on 20-Feb-2021 05:42:40
- Related Questions & Answers
- HTML DOM insertAdjacentElement( ) Method
- HTML DOM insertAdjacentHTML( ) Method
- HTML DOM insertAdjacentText( ) Method
- HTML DOM insertBefore( ) Method
- HTML DOM isDefaultNamespace( ) Method
- HTML DOM isEqualNode( ) Method
- HTML DOM isSameNode( ) Method
- HTML DOM item( ) Method
- HTML DOM appendChild() Method
- HTML DOM blur() Method
- HTML DOM addEventListener() Method
- HTML DOM querySelector() Method
- HTML DOM querySelectorAll() Method
- HTML DOM removeChild() Method
- HTML DOM removeAttribute() Method