Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an element from a string in JavaScript?
In this tutorial, we will get to know about various methods to create an element from strings in JavaScript. Creating elements from a string can be very useful in case we have to generate elements dynamically which makes the website interactive. An example will be like in a to-do list app we add, delete, and edit to-do items.
The createElement() Method
We create JavaScript items using the createElement() method. To create a particular element, we pass the item name as a string into the createElement() method.
The createElement(tagName) function has a parameter as the name of the tag which will be created using this method. Here tagName is the parameter name and it will be in form of a string. Note that only one element will be created from one string.
Syntax
document.createElement("tagName")
In the place of tagName we pass the tag name like p (paragraph), h1(heading 1), img (image). The createElement will make the tagName lowercase so you don’t have to worry about the case.
Steps
STEP 1 − Create strings with element values such as h3 and p, etc
STEP 2 − Pass the string to the createElement() method as parameters. Assign the value to a variable. This will create our required element.
STEP 3 − After creating the element, we assign the desired text to both elements using the innerText property.
STEP 4 − After all, append we use the append() or appendChild() method to append of the created element/s to the webpage so that it will be visible to the user.
Let’s create a heading and a paragraph from the strings.
let string1="h3" let string2="p" let element1=document.createElement(string1) let element2=document.createElement(string2)
So, you got to know about how we create elements but creating an element will not help to show the element to the user as it’s not a part of DOM instead we have to make it part of DOM by appending them to the webpage.
So, we use some methods like append(),and appendChild().
Example
Append created elements using append() method.
In the below example we created two elements h3 and p using the document createElement() method. Then assigned some texts to these elements and appended the elements to DOM using the append() method. Finally, displayed the elements using the innerHTML property.
<html> <head> <title>Creating elements from string in JavaScriptnhi</title> </head> <body> <script> let string1="h3" let string2="p" let element1=document.createElement(string1) let element2=document.createElement(string2) element1.innerText="An h3 element using string" element2.innerText="A paragraph element using string" document.body.append(element1) document.body.append(element2) </script> </body> </html>
Example
Append created elements using the appendChild() method.
In the below example, we created two elements h3 and p using the document createElement() method. Then assigned some texts to these elements and appended the elements to DOM using the appendChild() method. Finally, displayed the elements using the innerHTML property
<html> <head> <title>Creating elements from string in JavaScript </title> </head> <body> <script> let string1="h3" let string2="p" let element1=document.createElement(string1) let element2=document.createElement(string2) element1.innerText="An h3 element using string" element2.innerText="A paragraph element using string" document.body.appendChild(element1) document.body.appendChild(element2) </script> </body> </html>
Now you might be thinking that the above program’s output is the same then what makes both programs different?
Well, yes both are used to append the node to the HTML document but in case append() method it returns the appended node but the appendChildI() method returns nothing.
Using append() method we can append multiple elements at once but in the case appendChild() method we can only append a single element at once.
Like
document.body.append(element1, element2)
This will do the same work as
document.body.append(element1) document.body.append(element2)
Using append() method DOMString and DOMNodes both can be appended to the parent element but in the case appendChild() method only DOMNodes can be appended to the parent element.
So, these were some of the methods using which we can create elements from strings.
1K+ Views
