How to dynamically create new elements in JavaScript ?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to dynamically create 
        new elements in JavaScript?
    </title>
</head>
  
<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="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>
</body>
  
</html>

chevron_right


Output: 

Before clicking on the button: 



After clicking on the button: 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 
Before clicking on the button: 

After clicking on the button: 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.