创建元素节点必须用 document.createElement() 而非 innerHTML，避免清空子节点、重排和丢失事件；textContent 用于纯文本防 XSS，innerHTML 会解析 HTML；插入用 append/prepend/before/after，删除前须检查 parentNode，替换用 replaceWith 更灵活。
创建元素节点用 document.createElement()，不是字符串拼接
直接写 div.innerHTML = '<p>hello</p>' 看似快，但会清空原有子节点、触发重排、丢失事件监听器。真正动态建节点必须走 DOM API。
-
document.createElement('div')返回一个干净的Element实例，尚未挂载到文档中 - 支持传入带命名空间的标签名，如
document.createElementNS('http://www.w3.org/2000/svg', 'circle') - 不能传入 HTML 字符串（比如
createElement('<div class="x">') 会报错） <li>创建后需配合 <code>appendChild()或insertBefore()才能显示 - 只设纯文本：用
node.textContent = '1 → 页面显示 <code>1 < 2，安全且快 - 要解析 HTML：用
node.innerHTML = '<strong>bold</strong>'→ 渲染为加粗文字，但会执行内联 script（如有） -
innerText受 CSS 影响（如display: none的文本不计入），textContent不受样式影响，更可靠 - 对表单元素（
input、textarea），应操作value属性而非textContent - 用
DocumentFragment中转：const frag = document.createDocumentFragment(); items.forEach(item => frag.appendChild(item)); parent.appendChild(frag); - 现代写法可用
parent.append(...nodes)，支持多个参数或展开数组，且不清空已有子节点 -
parent.prepend()插到开头，node.before()/node.after()插在指定节点前后，比insertBefore()更直观 - 注意：
append()和prepend()接收的是节点或字符串；字符串会被自动转成Text节点，不会被解析为 HTML - 安全删除写法：
if (node.parentNode) node.parentNode.removeChild(node);或封装成node.remove?.()（需兼容性兜底） - 替换节点用
parentNode.replaceChild(newNode, oldNode)，必须确保oldNode是parentNode的直接子节点 - 用
node.replaceWith(...nodes)更灵活，支持多个新节点，也接受字符串（转为 Text） - 所有移除操作都不会自动清理绑定的事件监听器，如果节点曾用
addEventListener()绑过事件，需手动removeEventListener()或用事件委托规避
textContent 和 innerHTML 的边界必须分清
往节点里塞内容时，选错属性会导致 XSS 漏洞或格式丢失。
插入多个节点别循环调用 appendChild()
逐个 appendChild() 会多次触发重排，性能差。浏览器原生支持批量操作。
删除与替换节点前先确认父节点存在
node.remove() 看似简单，但若节点已脱离 DOM 或未挂载，它不报错也不生效——容易误以为删除成功了。
立即学习“Java免费学习笔记（深入）”；
textContent 却用了 innerHTML”，以及“删节点时没检查 parentNode 是否为空”。这些地方不报错，但行为和预期差很远。
