Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create an element from a string in JavaScript?
In this tutorial, we will explore various methods to create HTML elements from strings in JavaScript. Creating elements dynamically from strings is essential for building interactive websites, such as to-do list apps where items are added, deleted, and edited on the fly.
Using createElement() Method
The createElement() method is the standard way to create HTML elements dynamically in JavaScript. This method takes a string parameter representing the tag name and returns a new HTML element.
Syntax
document.createElement(tagName)
Where tagName is a string representing the HTML tag (like "div", "p", "h1", "img"). The method automatically converts the tag name to lowercase.
Basic Example
Here's how to create elements from strings and add them to the DOM:
<html>
<head>
<title>Creating Elements from String</title>
</head>
<body>
<div id="container"></div>
<script>
// Step 1: Define element types as strings
let headingTag = "h3";
let paragraphTag = "p";
// Step 2: Create elements using strings
let heading = document.createElement(headingTag);
let paragraph = document.createElement(paragraphTag);
// Step 3: Add content to elements
heading.innerText = "Dynamic Heading Element";
paragraph.innerText = "This paragraph was created from a string!";
// Step 4: Append to DOM
document.getElementById("container").appendChild(heading);
document.getElementById("container").appendChild(paragraph);
</script>
</body>
</html>
Using append() vs appendChild()
Both methods add elements to the DOM, but they have key differences:
Using append() Method
<html>
<body>
<div id="content"></div>
<script>
let div = document.createElement("div");
let span = document.createElement("span");
div.innerText = "Created with append()";
span.innerText = " - Multiple elements at once!";
// append() can add multiple elements
document.getElementById("content").append(div, span);
</script>
</body>
</html>
Using appendChild() Method
<html>
<body>
<div id="output"></div>
<script>
let button = document.createElement("button");
button.innerText = "Click Me";
// appendChild() adds one element at a time
document.getElementById("output").appendChild(button);
</script>
</body>
</html>
Comparison Table
| Method | Multiple Elements | Text Nodes | Return Value |
|---|---|---|---|
append() |
Yes | Yes | undefined |
appendChild() |
No | No | Appended node |
Creating Complex Elements
You can create more complex elements with attributes and styling:
<html>
<body>
<div id="app"></div>
<script>
// Create a styled div from string
let elementType = "div";
let newDiv = document.createElement(elementType);
// Add attributes and styling
newDiv.className = "highlight";
newDiv.style.backgroundColor = "lightblue";
newDiv.style.padding = "10px";
newDiv.style.border = "2px solid blue";
newDiv.innerText = "Styled element created from string!";
document.getElementById("app").appendChild(newDiv);
</script>
</body>
</html>
Conclusion
Creating elements from strings using createElement() is fundamental for dynamic web development. Use append() for flexibility with multiple elements, and appendChild() when you need the return value. This technique enables building interactive, data-driven web applications.
2K+ Views
