本文详解如何在 JavaScript 中正确创建 <div> 元素并将其作为 DOM 节点插入到现有元素中，避免字符串拼接导致的 HTML 被转义问题，确保内容以真实 DOM 结构渲染。
本文详解如何在 javascript 中正确创建 `
` 元素并将其作为 dom 节点插入到现有元素中，避免字符串拼接导致的 html 被转义问题，确保内容以真实 dom 结构渲染。
在 JavaScript 中，若直接使用字符串拼接（如 '<div>文本</div>'）并赋值给 innerText 或 textContent，浏览器会将其视为纯文本而非可执行的 HTML，因此 <div> 标签会被原样显示为字符，而非渲染为实际的 DOM 元素。
要真正插入一个具有语义和样式能力的 <div>，必须通过 DOM API 创建元素节点，再将其挂载到目标容器中。你当前代码中已用 this.createElement("div") 创建了按钮容器（button），接下来应将新的 <div> 作为其子节点插入——而非用字符串替代内容。
✅ 正确做法如下：
// 创建承载文本的新 div 元素
const contentDiv = document.createElement('div');
contentDiv.className = 'start-button-content'; // 可选：添加类名便于样式控制
// 设置文本内容（安全，自动转义防止 XSS）
const buttonText = typeof this.config.startBtnName === 'string'
? this.config.startBtnName
: this.local('test');
contentDiv.textContent = buttonText;
// 替换 button 的全部子内容为该 div（清空旧内容，插入新节点）
button.replaceChildren(contentDiv);⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 不要使用 innerHTML 直接插入未信任内容：若 this.config.startBtnName 可能含用户输入，务必用 textContent 而非 innerHTML，防止 XSS 漏洞；
- replaceChildren() 是现代推荐方式：它原子性地替换所有子节点，比 innerHTML = '' + appendChild() 更简洁、高效且语义清晰（兼容性：Chrome 86+、Firefox 76+、Safari 14.1+；如需兼容旧版，可用 button.textContent = ''; button.appendChild(contentDiv);）；
- 语义考量：若仅用于包裹纯文本，<span> 通常比 <div> 更合适（行内语义、无需块级布局）；但若需独立样式、定位或事件委托，则 <div> 合理；
- 类名管理：建议统一用 className 或 classList.add() 管理样式类，避免手动拼接 class 属性字符串。
总结：DOM 操作的核心原则是「操作节点，而非字符串」。始终优先使用 document.createElement()、Element.append()、replaceChildren() 等原生方法构建和更新结构，既保障安全性，又提升可维护性与性能。
