javascript动态创建与插入dom节点分三步：先用createelement或createtextnode生成节点，再用textcontent、innerhtml或setattribute设置内容和属性，最后用appendchild或insertbefore挂载到真实dom；批量操作推荐documentfragment优化性能。
JavaScript 动态创建与插入 DOM 节点，核心是三步：先生成节点、再设置内容或属性、最后挂载到真实 DOM 中。整个过程不依赖 HTML 源码，完全在运行时按需完成。
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
创建节点：用 createElement 或 createTextNode
创建元素节点最常用 document.createElement(tagName)，比如：
const btn = document.createElement('button');
它返回一个未挂载的 JS 对象，不是页面上可见的元素。
若要添加纯文本内容，应配合 document.createTextNode(text)：
const textNode = document.createTextNode('点击我');
再用 btn.appendChild(textNode) 把文本加进按钮里。
设置内容和属性：安全优先，区分用途
给元素设文字内容，推荐用 textContent（防 XSS，自动转义）：
btn.textContent = '提交';
需要渲染 HTML 片段时才用 innerHTML，但必须确保内容可信：
div.innerHTML = '强调文字';
设属性可用 setAttribute(name, value)，也支持直接赋值原生属性：
btn.id = 'submit-btn';
btn.className = 'primary';
btn.setAttribute('data-type', 'form-submit');
插入到页面：appendChild 和 insertBefore
节点必须插入父容器才能显示。常用两种方式：
- parent.appendChild(child)：追加到末尾，如 document.body.appendChild(btn)；
- parent.insertBefore(newNode, referenceNode)：插在某个已有节点前，例如把新 li 插到列表第一个位置：
ul.insertBefore(newLi, ul.firstChild);
父容器可以是 document.body、getElementById('container') 或 querySelector('.list') 等。
批量插入优化：用 DocumentFragment 避免重排
一次性添加多个节点时，频繁调用 appendChild 会多次触发浏览器重排重绘，影响性能。
推荐用 document.createDocumentFragment() 作中转容器：
const frag = document.createDocumentFragment();
for (let i = 0; i
const li = document.createElement('li');
li.textContent = `项目 ${i + 1}`;
frag.appendChild(li);
}
ul.appendChild(frag); // 只执行一次真实插入
DocumentFragment 本身不会被渲染，只作临时节点集合，效率更高。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
