createelement创建的元素默认不显示，必须用appendchild等方法插入dom树才能渲染；设置内容优先用textcontent防xss，属性用setattribute或直接赋值；不支持html字符串，勿与innerhtml混用。
createElement 创建的元素默认不显示
调用 document.createElement 只是生成一个 DOM 节点对象，它不在文档中，也不会渲染。必须手动插入到某个父节点里才可见。
常见错误是只写了 document.createElement('div') 就以为页面上会出现一个 <div></div> —— 实际什么都不会发生。
- 必须配合
appendChild、insertBefore或replaceChild等方法挂载到真实 DOM 树中 - 推荐优先用
parent.appendChild(newEl)，语义清晰且兼容性好 - 如果父节点还没加载完成（比如脚本放在
里），parent可能为null，需加判断或等DOMContentLoaded
设置属性和内容不能用 innerHTML 赋值后再插入
很多人习惯先创建元素，再用 el.innerHTML = 'xxx' 填充内容，这本身没问题；但要注意：如果内容含用户输入，直接赋 innerHTML 有 XSS 风险。
更安全的做法是分开处理文本内容与结构：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 纯文本用
textContent（如el.textContent = 'Hello <script>'</script>会原样显示） - 需要解析 HTML 结构时才用
innerHTML，且务必确保来源可信 - 设置属性优先用
el.setAttribute('class', 'btn')或直接赋属性el.className = 'btn'，避免拼接字符串
动态创建多个同类型元素时注意事件绑定方式
用 createElement 循环创建 10 个按钮，然后逐个绑 onclick，代码冗余且难维护。更合理的做法是：
- 用事件委托：在父容器上监听，通过
event.target判断是否点击了目标元素 - 如果必须单独绑定，建议用函数封装创建逻辑，避免重复写
addEventListener - 注意闭包陷阱：循环中给每个元素绑定事件时，别直接在 for 循环里用
var i，要用let i或立即执行函数
createElement 不支持 HTML 字符串解析，别和 innerHTML 混用
document.createElement 只接受单个标签名字符串，比如 'input'、'article'，不接受带属性或嵌套的 HTML 片段，例如 '<div class="wrap"><p>ok</p></div>' 会直接报错或创建一个名为该字符串的非法元素。
如果真要解析一整段 HTML 字符串，应该用：
-
DOMParser（适合片段较复杂、需严格解析） - 临时
div.innerHTML = htmlString+div.firstElementChild（简单场景够用，但注意 XSS） - 绝对不要把 HTML 字符串传给
createElement
容易被忽略的一点：createElement 创建的元素没有 outerHTML 属性可读（只有插入后才能取），调试时别指望刚创建完就 console.log(el.outerHTML) 看效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
