应使用 dataset 替代内联字符串参数，如用 data-handler="submit-form" 和 data-config='{"type":"user","lang":"en","valid":true}'，配合 JSON.parse 解析并 try/catch 捕错；纯文本用 textContent，渲染 HTML 须经 DOMParser 或严格转义，禁用 innerHTML 直接拼接用户输入。
用 dataset 替代内联字符串参数
onclick="submitForm('user', 'en', true)" 这类写法把逻辑硬编码进 HTML，一旦参数类型变更或校验规则增加，就得全量搜索替换，还容易漏掉引号转义。浏览器不会帮你检查 JSON 结构是否合法，data-config 是更可控的替代方案。
- 必须用
data-handler标识行为意图（如"submit-form"），而非直接绑函数名 -
data-config值应为合法 JSON 字符串，不是 JS 对象字面量；双引号需转义，避免解析失败 - JS 端统一用
JSON.parse(el.dataset.config)解析，配合 try/catch 捕获格式错误 - 服务端若生成该属性，需确保输出已做 JSON 编码，不能直接拼接未转义的变量
避免 innerHTML + 字符串拼接组合
哪怕只是 el.innerHTML = '<div>' + name + '</div>'，只要 name 来自用户输入，就等于开了 XSS 后门。模板字符串也一样危险——`<div>${name}</div>` 不会自动转义，<script> 照样执行。
- 纯文本内容一律用
textContent，它不解析标签，也不触发脚本 - 必须渲染 HTML 时，优先走
DOMParser：const frag = new DOMParser().parseFromString(htmlStr, 'text/html').body; 然后遍历子节点 append - 若用
innerHTML，前置必须经过严格转义函数，比如对、<code>>、&、"、'五字符做实体替换 - jQuery 的
.html()和原生innerHTML风险等级相同，别以为加了库就安全
结构化生成比多段拼接更可靠
像 html += '<tr><td>...</td></tr>' 循环十次，中间少个 > 或错位引号，整个表格就垮掉，且很难定位哪一行出问题。HTML 是嵌套结构，不是线性字符串。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
document.createElement+appendChild构建单个节点，再批量塞进DocumentFragment，一次插入 - 重复结构（如 radio 列表）抽成函数：function createRadioItem(value, label) { const div = document.createElement('div'); div.className = 'component EditorRadio'; /* ... */ return div; }
- 保留换行和缩进？别依赖
innerHTML输出格式，那是渲染结果；需要调试可打印outerHTML，但生产环境不靠它保证结构 - 如果真要拼接字符串，用
String.raw或模板字面量 + 显式换行符 \n，但仅限于完全可信的静态内容
textContent vs innerText 的空白处理差异
想保留用户输入里的空格、换行符？别用 innerText。它按渲染规则压缩空白，末尾空格、连续 \n 全被吃掉，且受 CSS display: none 或 visibility: hidden 影响。
立即学习“前端免费学习笔记（深入）”；
- 要 1:1 映射原始字符，包括 \t、\n、不间断空格 ，只用
textContent -
innerText适合读取“用户看到的文本”，比如做搜索高亮前的 normalize；不适合数据采集或回填 - 设值时
el.textContent = 'a\nb\tc'，DOM 中会真实保留这些字符，CSS 需配white-space: pre-wrap才显示换行 - 用
textContent不仅安全，性能也优于innerHTML（无 HTML 解析开销）
复杂点不在“怎么拼”，而在“拼完谁来验证结构合法性”。没人检查 data-config 是否 JSON 有效，也没人拦截 innerHTML 里混入的恶意 script 标签——这些必须在运行时主动断言，而不是靠开发自觉。
