This tutorial will demonstrate the strategies to parse an HTML string with JavaScript.
How to Parse an HTML String Using JavaScript?
To parse an HTML string with JavaScript, apply the following strategies:
- “createElement()” method and “innerHTML” property.
- “DOMparser()” constructor and “parseFromString()” method.
Method 1: Parse an HTML String in JavaScript Using the createElement() Method and innerHTML Property
The “createElement()” method is used to generate a node for an HTML element dynamically, and the “innerHTML” property gives the HTML content of an element. These approaches can be applied to create an element in JavaScript code and append an HTML string to it.
Syntax
In this syntax, “elementName” refers to the HTML element that needs to be created.
Example
Let’s go through the below-stated demonstration:
let myPara = document.createElement('p');
myPara.innerHTML = "<h2>This is Linuxhint</h2><h2>By JavaScript</h2>";
console.log(myPara);
</script>
In the above code block:
- Firstly, create an HTML element named “p” using the “createElement()” method.
- In the next step, append the stated HTML element using the “innerHTML” property.
- Lastly, display the created element accumulating the parsed HTML string on the console.
Output
From the given output, it can be seen that the “<p>” element is successfully created, and the parsed HTML strings are displayed.
Method 2: Parse an HTML String in JavaScript Using the DOMparser() Constructor and parseFromString() Method
The “DOMparser()” constructor creates the DOM parser object, and the “parseFromString()” method is used to parse the containing string to the HTML or XML document. These approaches can be applied to parse an HTML string by specifying the document type.
Syntax
In this syntax:
- “string” corresponds to the element that needs to be parsed in the document.
- “mimeType” indicates the document type that invokes the parser type.
Example
Let’s go through the below-stated code lines:
let myDoc = new DOMParser();
let myElement = myDoc.parseFromString("<div>This is Linuxhint</div>", 'text/html');
console.log(myElement)
</script>
In the above code snippet:
- Firstly, create a new DOM parser object using the “new” keyword and the “DOMparser()” constructor, respectively.
- In the next step, associate the created object with the “parseFromString()” method to parse the stated string value.
- The “text/html” in the method’s parameter specifies that the parsed string is an HTML document.
- Lastly, display the parsed HTML string on the console.
Output
In the above output, it is evident that the new DOM parser is successfully constructed.
Conclusion
To parse an HTML string with JavaScript, use the “createElement()” method and “innerHTML” property or the “DOMparser()” constructor and “parseFromString()” method. The former approaches can be used to create an HTML element in js code and parse a particular HTML string. The latter approach can be applied to create a new DOM parser object and parse an HTML string by specifying the document type. This write-up discussed the strategies to parse an HTML string with JS.
