Creating HTML Tag Using Javascript Using Document Object Model

Introduction to the DOM

The DOM represents the document in a tree-like structure, where each element, attribute, and piece of text in the HTML document becomes a node. This hierarchical structure enables developers to interact with various parts of the document using programming languages like JavaScript.

Why do we need this?

The DOM is leveraged to manipulate the structure and content of the webpage dynamically.

When working with web SDKs (Software Development Kits), The DOM is often used to dynamically manipulate the content of web pages. This can involve creating, modifying, or deleting HTML elements, handling events, and updating the user interface without requiring a full page reload.

For example, if you're using a web SDK in a React application, you might interact with the DOM through React's virtual DOM to efficiently update the UI based on state changes.

In this article you will learn to dynamically create and inject HTML tags into your webpage using JavaScript for enhanced user interface interactions. Elevate your coding skills with DOM manipulation.

Step 1:??

Create a blank html document and add a link to script file or create an inline Javascript.

Step 2:

Create a blank div tag to create a new html tag using javascript and create a input text field to get a data from user from which is display in? the newly creating tag and also creating a button which is called submit button.

    <div id="div1">
        
    </div>

    <input placeholder="Enter your Data here" id="input_text">
        

Step 3:????

In button field create a event “onclick” and create a function which should be called in Javascript file.

     <button onclick="create_html_tag()">Submit</button>        

Step 4:

Create a Javascript file? and inside that file create a function.

Step 5:

In the web page it will show an input field to get a data. In that first of all we want to get the content which is given by the user.So we want to fetch the content by Document Object Model.

content= document.getElementById("input_text").value;        

Step 6:

Second step will be we want to inform that which tag we want to create for example.

<p>,<h1>,<h2>….etc

paragraph=document.createElement("p");// <p> </p>        

Step 7:

Then Creating a TextNode to get the content and store it into the variable.

our_data= document.createTextNode(content);        

Step 8:

Then Add the content to the paragraph tag to display in the web page.

 paragraph.appendChild(our_data);        

Step 9:

Suppose in real time project there are so many paragraph tag so avoid the ambiguity so that only we want create a div tag to place the paragraph.Tag,So we want to send the content to div tag which is given below.

 mydiv= document.getElementById("div1");
 mydiv.appendChild(paragraph);        

Step 10:

Finally Save a project and Run in the browser.

Conclusion:

Document Object Model (DOM) plays a fundamental role in web development, serving as a dynamic interface that allows developers to interact with and manipulate HTML documents. By representing webpages as a tree structure of nodes, the DOM enables the creation of responsive and interactive user interfaces.