How to dynamically create new elements in JavaScript ? - GeeksforGeeks

05 Jun, 2020
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
<!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>
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
<!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: Before clicking on the button: 
After clicking on the button: 
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Write From Home
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Form validation using jQuery
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?