How to Create a New DOM Element from HTML String

In web development, it’s common to create and manipulate elements on the Document Object Model (DOM) using JavaScript.

One of the ways to create a new DOM element is by using an HTML string.

In this Javascript tutorial, we’ll go over how to create a new DOM element from an HTML string in JavaScript.

Steps to Create a New DOM Element from HTML String

There are several steps to follow to create a new DOM element from an HTML string in JavaScript.

Let’s go over each step in detail:

Create an HTML string: The first step is to create an HTML string that represents the element you want to create. The string should be in proper HTML format and can contain one or more elements.
Create a parser: Once you have the HTML string, you need to create a parser to parse the HTML string into a DOM element. You can use the DOMParser object to parse the HTML string into a DOM element.
Parse the HTML string: Next, you need to parse the HTML string using the parser. You can use the parseFromString() method of the DOMParser object to parse the HTML string.
Get the DOM element: Finally, you can get the DOM element from the parsed HTML string by using the querySelector() method.

Example: Here is an example of how you can create a new DOM element from an HTML string in JavaScript:

let htmlString = '<div><p>Hello World!</p></div>';
let parser = new DOMParser();
let dom = parser.parseFromString(htmlString, 'text/html');
let element = dom.querySelector('div');