反馈

HTML 转 JS 代码

我要提建议

把 HTML 片段转成创建同等 DOM 的 JavaScript 代码：可选 createElement 逐节点构建或 innerHTML 赋值，本地解析。

相关工具

这个工具是做什么的

手写 document.createElement 一堆嵌套节点很容易出错，尤其是从设计稿或后端返回的 HTML 片段改成脚本构建时。本工具用本机内置的 HTML 解析器读入片段，再生成创建同等 DOM 的 JavaScript 代码：可以逐节点输出 createElement 与 setAttribute，也可以直接给出 innerHTML 赋值语句；容器选择器可以指定，默认挂到 document.body。解析结果反映浏览器实际构建的 DOM —— 自动闭合标签、修正非法嵌套这类情况都会体现出来。全部在本地完成。

使用方法

  1. 把 HTML 片段粘贴进输入框（可以带缩进与换行）。
  2. 选择输出方式：「createElement 逐节点构建」或「innerHTML 赋值」。
  3. 需要挂到指定容器时填写选择器（如 #app）；留空则使用 document.body。
  4. 点击「生成代码」，复制结果直接粘进项目。

常见问题

两种输出方式怎么选？
createElement 方式逐节点建元素、设置属性与文本，便于插入事件监听或继续复用节点引用，适合脚本里构建结构；innerHTML 方式只输出一行赋值，代码最短、可读性好，但会替换容器内原有内容，且不会绑定任何事件处理。
为什么生成的代码里多了 class / id 之外的 setAttribute？
class 与 id 会直接写成 element.className / element.id（更易读），disabled、checked 这类布尔属性写成 element.disabled = true，其余属性（含 data-*、aria-*）统一用 setAttribute 输出，保证与源 HTML 等价。
空格和换行会怎样？
仅含空白字符的文本节点会被忽略，因此缩进与换行不会污染生成代码；元素之间的实际文本（例如链接文字）会保留，并按 JS 字符串规则转义。
支持把 JS 代码再转回 HTML 吗？
不支持，这是刻意取舍：反向转换意味着执行任意脚本，安全风险不可控。如果要还原 HTML，直接用 innerHTML 模式输出的字符串即可。
会上传我的 HTML 吗？
不会。解析与代码生成都在本机用本地引擎完成，没有网络请求。