Open In App
Related Articles

How to create an element from a string in JavaScript ?

Improve Article
Improve
Save Article
Save
Like Article
Like

In this article, we will learn how to create an element from a string using JavaScript. This can be used in situations where dynamically generated elements are required by the user.

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.

Example: In this example, we create a heading element by specifying the string as “h2”.

HTML




<!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>


Output:

Create an element from a string

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.

Example:

HTML




<!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>


Output:

Screenshot-(21)

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.

Example: In this example, the string is specified with multiple elements that are parsed to HTML and added to the body of the document.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
          Create an element from a string
      </title>
</head>
 
<body>
    <!-- Include jQuery -->
    </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:

Create an element from a string


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 19 Jul, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials