HTML 转 JS 代码
把 HTML 片段转换成 JavaScript：innerHTML / outerHTML 赋值或 document.createElement 构建链，支持缩进、字符串转义，非法 HTML 会给出明确提示。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
HTML 片段
空元素（br、img、input…）会自动识别，不需要写 /
生成的 JavaScript
请输入 HTML 片段
这个工具能做什么
- 把后端模板或 CMS 里的静态 HTML 片段搬进前端组件，需要写成 createElement 链时直接复制生成代码。
- 调试时想快速在控制台里塞一段结构到页面上：innerHTML / outerHTML 模式生成的代码可以直接粘进 DevTools。
- 给模板加缩进又不改结构：缩进 ≥ 2 时会把 HTML 重新排版，方便贴进代码仓库做 diff。
- 检查一段 HTML 是否合法（标签是否闭合、结束标签是否匹配），比在浏览器里等到渲染异常更快发现问题。
示例
输入
<div class="card"><h2>你好</h2><p>Hello <b>UniKit</b></p></div>
输出
const target = document.querySelector('#app');
target.innerHTML = `<div class="card"><h2>你好</h2><p>Hello <b>UniKit</b></p></div>`;这是默认的 innerHTML + 模板字符串 + 不重新排版（缩进 0）结果：整段 HTML 包在反引号里，所以双引号不用转义。切成「创建 DOM」模式会输出 createElement 链；换成「单引号字符串」写法则会把整段 HTML 放进一对单引号里，且引号保持原样。
常见问题
三种输出方式该怎么选？
innerHTML / outerHTML 最短，适合静态内容或已经由后端拼好的片段；「创建 DOM」模式生成 createElement 链，值来自用户输入时更安全，因为文本走 textContent 而属性走 setAttribute，不会被当成 HTML 解析。
为什么缩进 ≥ 2 会改变输出？
因为缩进大于 0 时会先把 HTML 重新排版（只在元素子节点之间换行并去掉纯空白文本节点）。副作用是内联元素之间可能因此多出空白，页面上的中文/英文间距可能有细微变化。要原样保留就选「不重新排版」。
HTML 写错会报什么错？
四种情况分别对应四条提示：标签、注释或属性引号没闭合；有开始标签缺结束标签；结束标签与开始标签不匹配；出现多余的结束标签。空元素（br、img、input 等）不需要写 /，工具会按 HTML 规范自动识别。
生成的字符串安全吗？
模板字符串模式会转义反引号和 ${，单引号模式会转义引号、反斜杠和换行，所以生成的代码一定是语法合法的 JavaScript。但 innerHTML 本身不转义 HTML，若片段里含用户输入仍可能产生 XSS，这种情况请用「创建 DOM」模式。
容器选择器填什么？
生成代码的第一行是 document.querySelector(你的选择器)，默认 #app。这里只是写进字符串，工具不会真的去查找这个元素，所以填任何合法选择器都不会报错。
关键词：htmljavascriptcreateelementinnerhtmlouterhtmldom转换代码生成html to js转义escape