How to dynamically create HTML element in JavaScript

Question

Apu December 28, 2022 › #append › #Element

❌

How to dynamically create HTML element in JavaScript

Whenever we work with JavaScript we may need to dynamically create new elements like div, buttons, etc.

So, in this article, we will discuss how to dynamically create HTML element (div, button, paragraph, heading etc.) in JavaScript.

How to dynamically create div element? #

To create a new element (div) , we will use the createElement() method.

const newDiv = document.createElement('div');
      newDiv.innerText = 'New Div Element.';
      document.body.appendChild(newDiv);

<button onclick="createDiv()">Create Div</button>
<script>
 function createDiv(){
  const newDiv = document.createElement('div');
        newDiv.innerText = 'New Div Element.';
        document.body.appendChild(newDiv);
 }
</script>

How to add onclick attribute to be the div element. #

We can add an attribute to the created div element using the setAttribute() method.

const newDiv = document.createElement('div');
      newDiv.setAttribute("onclick","alert('hi')");

<button onclick="createDiv()">Create Div</button>
<script>
function createDiv(){
 const newDiv = document.createElement('div');
       newDiv.innerText = 'New Div Element.';
       newDiv.setAttribute("onclick","alert('hi')");
       document.body.appendChild(newDiv);
       
}
</script>

Write Your Answer

Apu · Accepted Answer · 2022-12-28T05:00:00+05:30

Whenever we work with JavaScript we may need to dynamically create new elements like div,…