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;"> neveropen </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;"> neveropen </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 ?
