JavaScript library to parse HTML mark-up and convert it into DOM calls.
More and more people use JavaScript to manipulate the DOM. Naturally this can pose a security risk as soon as user input is involved: Embedding user input can easily lead to Cross Site Scripting (XSS). Having a clean JavaScript codebase that seperates HTML elements and text can mitigating that risk by treating user data as non-HTML content. html2dom helps you to to enforce a stricter seperation betwwen HTML and text. Using the library will enable you to transform your big fat assignment to innerHTML into multiple simple DOM calls. A useful side-effect is, that browsers won't have to run a HTML parser on your long HTML strings which might even improve your website performance.
See this HTML?
<p id="greeting">Hello <b>World</b></p>What if we wanted add this to a document using JavaScript? Let's use html2dom for that!
var h2d = html2dom.parse('<p id="greeting">Hello <b>World</b></p>');
console.log(h2d);This will give us:
var docFragment = document.createDocumentFragment(); // contains all gathered nodes
var greeting = document.createElement('P');
greeting.setAttribute("id", "greeting");
docFragment.appendChild(greeting);
var text = document.createTextNode("Hello ");
greeting.appendChild(text);
var b = document.createElement('B');
greeting.appendChild(b);
var text_0 = document.createTextNode("World");
b.appendChild(text_0);Sometimes, you might want to check for yourself what happens when you throw the supplied JavaScript code into a script tag and preview the HTML that is being generated (the demo does that).
And, do you know what? We also use that for our tests, to see if the JavaScript we get out of html2dom renders the HTML we have supplied in the first place. Nifty, eh?
var inp = '<p id="greeting">Hello <b>World</b></p>';
var js = html2dom.parse(inp);
html2dom.dom2html(js, function callback(res) {
console.log("Input:", inp);
console.log("Result:", res);
});And hooray, this results is:
Input: <p id="greeting">Hello <b>World</b></p>
Result: <p id="greeting">Hello <b>World</b></p>Mozilla Public License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent