HTML to JavaScript
Turn an HTML snippet into JavaScript: innerHTML / outerHTML assignments or a document.createElement build chain, with indentation, string escaping and clear errors for invalid HTML.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
HTML snippet
Void elements (br, img, input…) are detected automatically — no / needed
Generated JavaScript
Enter an HTML snippet
What this tool does
- Move a static HTML fragment from a backend template or CMS into a frontend component and copy the generated createElement chain.
- Paste a snippet into DevTools fast: the innerHTML / outerHTML modes produce code you can drop straight into the console.
- Re-indent a fragment without changing its structure — an indentation of 2 or more reformats the markup so it diffs cleanly in a repo.
- Check whether a snippet is valid (closed tags, matching end tags) before a browser render error tells you the hard way.
Example
Input
<div class="card"><h2>Hello</h2><p>See <b>UniKit</b></p></div>
Output
const target = document.querySelector('#app');
target.innerHTML = `<div class="card"><h2>Hello</h2><p>See <b>UniKit</b></p></div>`;That is the default innerHTML + template literal + no reformatting (indent 0) result: the whole fragment sits inside backticks, so the double quotes need no escaping. The "build DOM" mode emits a createElement chain instead, while the single-quoted style wraps the fragment in a pair of single quotes with the quotes left as-is.
Frequently asked questions
Which of the three output modes should I use?
innerHTML / outerHTML is the shortest and fits static markup or fragments your backend already assembled. The "build DOM" mode emits a createElement chain and is safer for untrusted values, because text goes through textContent and attributes through setAttribute rather than being parsed as HTML.
Why does an indentation of 2 or more change the output?
Any indent above 0 reformats the markup: it wraps between element children and drops whitespace-only text nodes. The side effect is extra whitespace between inline elements, which can subtly shift spacing. Pick "keep source as is" when the exact bytes matter.
What errors can the validator report?
Four cases, each with its own message: an unclosed tag, comment or attribute quote; a tag missing its end tag; an end tag that does not match its opening tag; and a stray end tag. Void elements such as br, img and input need no slash — they are detected from the HTML spec.
Is the generated string safe?
The template-literal mode escapes backticks and ${, and the single-quote mode escapes quotes, backslashes and newlines, so the JavaScript is always syntactically valid. innerHTML itself does not escape HTML though — if the fragment carries user input, switch to "build DOM".
What should I put in the container selector?
It becomes the argument of document.querySelector on the first generated line and defaults to #app. It is only written into the string — the tool never looks the element up — so any valid selector is accepted without errors.
Keywords：htmljavascriptcreateelementinnerhtmlouterhtmldom转换代码生成html to js转义escape