How Can I Convert HTML Strings into DOM Elements in JavaScript?

Creating DOM Elements from HTML Strings

In JavaScript, there are instances when you need to convert HTML strings into their corresponding DOM elements. This is a fundamental operation for dynamically creating and manipulating the page's content, such as when appending elements to the document.

To accomplish this task, you can utilize a DOMParser. The syntax for using DOMParser is:

const doc = new DOMParser().parseFromString(htmlString, "text/xml");

Here, htmlString represents the HTML code you wish to convert, and doc is the resulting document containing the parsed DOM elements.

For instance, consider the following HTML string:

<div>
    <a href="#"></a>
    <span></span>
</div>

Using the DOMParser, you can convert this string into a DOM element as follows:

const htmlString = "
";
const doc = new DOMParser().parseFromString(htmlString, "text/xml");

The doc object now holds the parsed HTML as a DOM element, which can be appended to the page using methods like appendChild():

const parentElement = document.getElementById('parent');
parentElement.appendChild(doc.firstChild);

This will add the parsed HTML content as a child element of the parentElement in the actual DOM. Note that DOMParser interprets XHTML-style HTML, which requires closing tags, as in the example above.

The above is the detailed content of How Can I Convert HTML Strings into DOM Elements in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!