createelement()创建的元素不显示，因其仅生成游离dom节点，未挂载到文档树中；必须用appendchild()等方法显式插入父容器，否则浏览器不渲染。
createElement() 不是万能的“插入函数”，它只负责造出空壳元素，不自动挂载到页面，也不处理文本内容嵌套逻辑——用错一步，元素就“看不见”。
createElement() 创建的元素为什么没显示？
因为 createElement() 返回的是一个游离的 DOM 节点，尚未被任何父节点持有。浏览器只渲染树中已挂载的节点。
- 必须显式调用
appendChild()、insertBefore()或insertAdjacentElement()才能进 DOM 树 - 如果目标容器不存在（比如
getElementById('xxx')返回null），后续追加会静默失败，控制台无报错 - 创建后立即读取
offsetHeight或getBoundingClientRect()会得到0，因尚未布局
textContent vs innerHTML：往新元素里塞文字该选谁？
两者行为差异直接影响安全性和结构完整性。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
textContent = 'hello <script>alert(1)</script>'→ 纯文本渲染，防 XSS，但不解析标签 -
innerHTML = 'hello <strong>world</strong>'→ 解析 HTML，适合带格式内容，但若拼接用户输入（如innerHTML = '<div>' + userInput + '</div>'）极易触发 XSS - 对纯文本场景，优先用
textContent；需动态插入含标签的结构时，改用insertAdjacentHTML()更可控
createElement('div') 和 createElement('DIV') 有区别吗？
没有。HTML 标签名在 createElement() 中不区分大小写，'div'、'DIV'、'DiV' 都生成标准 <div> 元素。
<ul>
<li>但自定义元素名（如 <code>createElement('my-button')）必须全小写且含短横线，否则无法被识别为合法 custom element
createElement('123abc') 或 createElement('')）会抛 DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('') is not a valid name.
createElement('svg') 可能失败，应改用 document.createElementNS('http://www.w3.org/2000/svg', 'svg')
为什么有时用 innerHTML += 更快，但 createElement 更推荐？
性能不是唯一维度，关键看操作意图和副作用。
-
innerHTML +=会强制重解析整个父容器的全部子节点，已有绑定的事件监听器、表单状态、焦点位置全部丢失 -
createElement()+appendChild()是增量更新，不影响其他子节点，适合高频、局部添加（如聊天消息流） - 若一次插入大量同构结构（如表格行），用
DocumentFragment缓存再批量挂载，比逐个appendChild()更高效
真正容易被忽略的点：createElement() 创建的元素不会继承父容器的 CSS 作用域或 scoped style，如果依赖 Shadow DOM 或 <style scoped></style>，得手动复制或透传样式上下文。
