Add HTML elements dynamically

HTML documents are conveniently accessible and manipulable through the HTML DOM, a hierarchical representation of the document. Once a browser loads an HTML document, it becomes a Document object. By utilizing the document.createElement() method in JavaScript, developers can dynamically generate specific HTML elements. This process allows for the subsequent addition of attributes.

However, for the element to be visible within the document, it must be inserted into the DOM tree of the document. This approach empowers developers to dynamically construct and enhance the structure of HTML documents.

<html> <body> <button onclick="create()">Create Heading</button> <script> function create() { var h1 = document.createElement('h1'); h1.textContent = "New Heading!!!"; h1.setAttribute('class', 'note'); document.body.appendChild(h1); } </script> </body> </html>


The document.createElement serves to create an HTML element by specifying the desired tag. Following its creation, the textContent can be altered, and attributes like the class attribute can be adjusted using the setAttribute method. This versatility extends to the addition of various attributes, such as data attributes, akin to those in HTML. Subsequently, the element is integrated into the document's structure through the appendChild method of the body element, effectively adding it to the document's body. This sequence of actions enables the dynamic manipulation and incorporation of HTML elements into the document's structure using JavaScript.

Actually, It's essentially equivalent to < H1 class="note" > New Heading!!! < /h1 > .


The remarkable capability showcased here lies in our ability to generate and style elements dynamically in real-time. The choice rests with us—to either incorporate all elements during design or to employ the createElement() method for generating and inserting HTML elements dynamically during runtime. This approach grants developers the flexibility to shape web content according to specific requirements and user interactions.