How Can I Parse an HTML String into DOM Elements in JavaScript?

Parsing HTML into DOM Elements

In Javascript, the need often arises to convert a string containing HTML into DOM elements that can be manipulated. The standard methods, such as innerHTML and innerText, offer limited control over the resulting elements. For greater flexibility, consider utilizing a DOMParser.

Converting HTML Strings to DOM Elements

To convert an HTML string into DOM elements, follow these steps:

1. Instantiate a DOMParser: var parser = new DOMParser();
2. Parse the HTML string using the parseFromString() method: var doc = parser.parseFromString(htmlString, "text/xml");

Example

Consider the following HTML string:

<div>

To convert this string into a DOM element, execute the following code:

var htmlString = "<div>

The doc.firstChild attribute now contains a parsed DOM representation of the HTML string. You can append this element to the DOM using appendChild().

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