HTML中如何用createElement创建元素？

本文深入解析了HTML中createElement()方法的核心机制与常见误区，强调它仅生成游离的DOM节点，必须配合appendChild()等方法显式挂载才能渲染，否则元素将“隐形”；同时对比textContent与innerHTML在安全性与结构处理上的本质差异，厘清大小写规范、自定义元素命名规则、旧浏览器兼容性陷阱，并揭示性能优化的关键——避免滥用innerHTML+=导致状态丢失，善用DocumentFragment实现高效批量插入，还点明了样式继承这一易被忽视的深层问题，为前端开发者提供既扎实又实用的DOM操作指南。

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

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' 都生成标准