Creating an element from a string in JavaScript means converting HTML text into an actual DOM element that can be added to the webpage. This is useful when dynamically generating UI components from templates or user input.
- Using innerHTML: Create a container element and set its innerHTML to the string, then access the created element.
- Using insertAdjacentHTML(): Directly inserts HTML string into the DOM at a specified position without overwriting existing content.
- Using DOMParser: Parses the string into a document object, allowing safe and structured extraction of elements.
This can be achieved using many approaches as given below:
Approach 1: Using the createElement() method
- The createElement() method is used for creating elements within the DOM.
- It accepts two parameters, a tagName which is a string that defines the type of element to create, and an optional options object that can be used to modify how the element is created.
- Any element that is needed can be passed as a string in this function and this would return the specified element.
- This approach can only be used to create a single element from one string.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Create an element from a string
</title>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<script>
// Specify the string from which
// the elements would be created
let str = "h2";
let str2 = "p";
// Creating the elements
let elem =
document.createElement(str);
let elem2 =
document.createElement(str2);
// Insert text in the element
elem.innerText =
"This is the new heading element";
elem2.innerText =
"This is the new paragraph element";
// Add the element to the body
document.body.appendChild(elem);
document.body.appendChild(elem2);
</script>
</body>
</html>
Approach 2: Using the DOMParser
- The DOMParser is an API in JavaScript that allows you to parse HTML strings and create a DOM document from it.
- It provides a way to programmatically create and manipulate HTML documents in memory.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Create an element from a string
</title>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<script>
// Create a string representing the element
const elementString = `<div id="myElement">This heading
is created by using DOMParser</div>`;
// Create a new DOMParser
const parser = new DOMParser();
// Parse the element string
const doc = ]
parser.parseFromString(elementString, 'text/html');
// Access the parsed element
const element = doc.body.firstChild;
// Now you can manipulate or append the element to the document
document.body.appendChild(element);
</script>
</body>
</html>
Approach 3: Using the jQuery parseHTML() method
- The parseHTML() method of jQuery is used to parse an HTML string so that it can be used to create elements according to the given HTML.
- This approach can be used to create multiple elements from the string.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Create an element from a string
</title>
</head>
<body>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>
<h1 style="color:green">
GeeksforGeeks
</h1>
<script>
// Define the HTML string to be parsed
str = "<p>This <i>element</i> is created by" +
" the <b>parseHTML()</b> " +
"method in <i>jQuery</i></p>";
// Parsing the string into HTML
html = $.parseHTML(str);
// Append the element in the document
$('body').append(html);
</script>
</body>
</html>
Output:
Approach 4: Using innerHTML
In this approach, we use the innerHTML property to set the content of the existing container with the specified string, creating a new element inside it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Create Element Example</title>
</head>
<body>
<div id="yourContainerId"></div>
<script>
let container = document.getElementById("yourContainerId");
container.innerHTML =
"<div>Hello, I'm a new element!</div>";
</script>
</body>
</html>