HTML怎么创建元素？createElement方法避坑指南

createElement()创建的元素不显示，因其仅生成游离DOM节点，未挂载到文档树中；必须用appendChild()等方法显式插入父容器，否则浏览器不渲染。

createElement() 不是万能的“插入函数”，它只负责造出空壳元素，不自动挂载到页面，也不处理文本内容嵌套逻辑——用错一步，元素就“看不见”。

新手常遇到的一个问题是：用 createElement() 创建元素后，页面上没有任何显示。这并非代码“坏了”，而是缺少关键一步——只生成了对象，未将其挂载到 DOM 树上。

createElement() 创建的元素为什么没显示？

因为 createElement() 返回的是一个游离的 DOM 节点，尚未被任何父节点持有。浏览器只渲染树中已挂载的节点，以下几个常见“坑”需要留意：

• 必须显式调用 appendChild()、insertBefore() 或 insertAdjacentElement() 才能进入 DOM 树
• 如果目标容器不存在（比如 getElementById('xxx') 返回 null），后续追加会静默失败，控制台无报错
• 创建后立即读取 offsetHeight 或 getBoundingClientRect() 会得到 0，因尚未布局

textContent vs innerHTML：往新元素里塞文字该选谁？

这两者的选择直接影响安全性和结构完整性，不少安全问题就出在这上面。

• textContent = 'hello ' → 纯文本渲染，防 XSS，但不解析标签
• innerHTML = 'hello world' → 解析 HTML，适合带格式内容，但若拼接用户输入（如 innerHTML = '
  ' + userInput + '
  '）极易触发 XSS
• 对纯文本场景，优先用 textContent；需动态插入含标签的结构时，改用 insertAdjacentHTML() 更可控

createElement('div') 和 createElement('DIV') 有区别吗？

没有。HTML 标签名在 createElement() 中不区分大小写，'div'、'DIV'、'DiV' 都生成标准