createelement 创建未挂载 dom 元素，需手动插入；设内容用 textcontent 或 innerhtml，设属性可用 setattribute 或直接赋值；批量操作宜用 documentfragment 提升性能；不支持 html 字符串解析。
JavaScript 中用 createElement 创建新 DOM 节点，核心是先创建元素，再设置内容或属性，最后插入到页面中——不直接写 HTML 字符串，而是通过 JS 对象操作节点。
基础用法：创建并插入一个简单元素
document.createElement(tagName) 接收标签名字符串（如 "div"、"p"、"li"），返回一个未挂载的 DOM 元素对象。
- 创建后它只是内存中的节点，不会自动显示在页面上
- 必须手动调用
appendChild()、prepend()或insertBefore()等方法添加到真实 DOM 中 - 例如：const btn = document.createElement("button");
btn.textContent = "点击我";
document.body.appendChild(btn);
设置元素内容和属性
创建完元素后，常用方式有：
-
element.textContent：安全插入纯文本（防 XSS），会覆盖子节点 -
element.innerHTML：可插入带标签的 HTML，但需确保内容可信 -
element.setAttribute("name", "value")或直接赋值element.id = "myId"、element.className = "btn" - 事件绑定用
element.addEventListener("click", handler)，不要用onclick属性
批量创建与文档片段优化性能
一次插入多个节点时，频繁操作真实 DOM 效率低。推荐用 DocumentFragment 作为中转：
- 创建碎片：
const frag = document.createDocumentFragment(); - 把所有新节点
appendChild到frag中 - 最后只执行一次
parent.appendChild(frag)，浏览器仅触发一次重排 - 比循环多次操作
body或容器快得多，尤其在列表渲染场景下明显
注意 createElement 不支持 HTML 字符串解析
createElement 只接受单个标签名，不能传入完整 HTML 片段（比如 "<div><span>hello</span></div>"）。
- 如果需要解析 HTML 字符串，可用
DOMParser或临时容器（如div.innerHTML = str后取div.firstElementChild） - 误写成
document.createElement("<div>") 会导致创建一个名为 <code><div> 的未知自定义标签，不是预期的 <code>div - 动态生成复杂结构时，优先拆解为多步
createElement+appendChild，逻辑更可控
