How to dynamically create new elements in JavaScript ?

How to dynamically create new elements in JavaScript ?

Last Updated : 15 Feb, 2023

New elements can be dynamically created in JavaScript with the help of createElement() method. The attributes of the created element can be set using the setAttribute() method. The examples given below would demonstrate this approach.

Example 1: In this example, a newly created element is added as a child to the parent element. The type of the element to be created is specified and its value or text node for the specified element is added.

HTML

<h1 style="color:green;">
    GeeksforGeeks
</h1>

<!-- Form to add item -->
<form action="#">

    <!-- Type of Element -->
    <label for="type">
        Add Element Type
    </label>

    <input type="text" id="type" placeholder="Like: div, h1, li...." value="li" />
    <br /><br />

    <!-- Text/Value for the element --->
    <label for="value">
        Add Element Value
    </label>

    <input type="text" id="value" placeholder="Like: Hello GeeksForGeeks" value="CHILD 2" />
    <br /><br />

    <!-- Submit the Form -->
    <button type="button" onClick="addItem()">
        Add
    </button>
</form>

<!-- Parent tag where we add
        item as child -->
<ol id="parent">
    <li>List Item 1</li>
</ol>

<script>
    // Define the addItem() function
    // to be called through onclick
    function addItem() {
    
        // Get type of element from form
        let type = document.
            getElementById("type").value;
    
        // Get the text/value for the tag
        // from the form
        let value = document.
            getElementById("value").value;
    
        // createElement() is used for
        // creating a new element
        type
            = document.createElement(type);
    
        // Use value as textnode in this example
        type.appendChild(
            document.createTextNode(value));
    
        // Append as child to the parent
        // tag i.e. ol
        document.getElementById(
            "parent").appendChild(type);
    }
</script>

Output:

How to dynamically create new elements in JavaScript ?

Example 2: In this example, a newly created element along with its attributes is added to the body element of the page. The attributes can only be entered using two arguments i.e. type of attribute and the value of the attribute. The CSS for the "child" item is added for convenience.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to dynamically create
        new elements in JavaScript?
    </title>

    <style>
        /* CSS for child item */
        .child {
            color: white;
            background-color: green;
        }
    </style>
</head>

<body id="body">
    <h1 style="text-align:center; color:green;">
        GeeksforGeeks
    </h1>
    <!-- Form to add item -->
    <form action="#" style="text-align: center;">

        <!-- Type of element -->
        <label for="type">
            Add Element Type
        </label>

        <input type="text" id="type" placeholder="Like: div, h1, li...." value="h3" />
        <br /><br />

        <!-- Text/value for element --->
        <label for="value"> Add Element Value</label>

        <input type="text" id="value" placeholder="Like: Hello GeeksForGeeks" value="Hello GeeksForGeeks" />
        <br /><br />

        <!-- Add attributes for element --->
        <label for="attr"> Add Attributes</label>
        <form id="attr">
            <label for="attrType">Add Attribute Type</label>
            <input type="text" style="width:240px;" placeholder="forexample: enter 
                            'class' without quotes" id="attrType" value="class" />

            <br />
            <br />
            <label for="attrValue">
                Add Attribute Value
            </label>
            <input style="width:240px;" type="text" placeholder="for example: enter 
                            'child' without quotes" id="attrValue" value="child" />
        </form>
        <br /><br />

        <!-- Submit the form -->
        <button type="button" onClick="addItem()">
            Add
        </button>
    </form>

    <div>
        <p>CHILD 1</p>
    </div>

    <script>
        // Define the addItem function
        // to be called through onclick()
        function addItem() {
        
            // Get Elements by id of the form inputs
            let parent = 
                document.getElementById("body");
        
            let attrType = 
                document.getElementById("attrType");
        
            let attrValue = 
                document.getElementById("attrValue");
            let type = document.getElementById("type");
            let value = document.getElementById("value");
        
            if (type.value == "" || value.value == "") {
                window.alert(
                    "There is an error in form input");
                window.reload();
            }
        
            // createElement() method is used
            // to create a new element
            type = document.createElement(type.value);
        
            // Append a text node for this example
            type.appendChild(
                document.createTextNode(value.value));
        
            if (attrValue.value == "" 
                    || attrType.value == "") {
                attr = null;
            }
            else {
                // setAttribute() is used to set
                // the attributes of the element
                type.setAttribute(
                    attrType.value, attrValue.value);
            }
        
            // Append as child to the parent
            // i.e. body
            parent.appendChild(type);
        }
    </script>
</body>

</html>

Output:

How to dynamically create new elements in JavaScript ?

How to dynamically create new elements in JavaScript ?

R

Ritik_Dua

Improve

Article Tags :

Similar Reads

How to add HTML elements dynamically using JavaScript ?

We learn how to add HTML elements dynamically using JavaScript. A basic understanding of HTML, CSS, and JavaScript is required. Here we are going to use a button and by clicking this button, we can add an HTML element dynamically in this example. Below are the approaches used to add HTML elements dy

How to Create a Form Dynamically with the JavaScript?

The task is to create an HTML form dynamically with the help of JavaScript. There are two approaches that are discussed below.Approach 1: Use document.createElement() to create the new elements and use setAttribute() method to set the attributes of elements. Append these elements to the <form>

How to add elements to an existing array dynamically in JavaScript ?

An array is a JavaScript object that can hold multiple values at a time, irrespective of the data type. In this article, we will see how to add new elements to an existing array dynamically in Javascript. We will discuss two methods in this article i.e. push() method and dynamically adding an elemen

Dynamically Create and Remove Iframe in JavaScript

JavaScript allows us to dynamically add and remove elements to the document. We can use event listeners and special JavaScript methods to create and remove HTML elements. This article focuses on creating and removing iframe elements dynamically using JavaScript.Let's first create a basic structure o

JavaScript code for adding new elements in a dynamic way

Javascript is a very important language when it comes to learning how the browser works. Often there are times we would like to add dynamic elements/content to our web pages. This post deals with all of that. Creation of new element: New elements can be created in JS by using the createElement() met