ES6模板字符串仅生成HTML字符串，不直接操作DOM；需配合innerHTML、insertAdjacentHTML等方法插入，注意XSS风险及null/undefined处理，复杂场景推荐createElement替代。
ES6 模板字符串本身不生成 DOM，它只是生成 HTML 字符串；真正插入 DOM 需要配合原生 DOM 方法（如 innerHTML、insertAdjacentHTML）或框架机制。关键在于：模板字符串负责安全、清晰地拼接结构，而 DOM 插入需手动控制时机和位置。
用反引号拼接动态 HTML 字符串
模板字符串支持多行、变量插值和表达式，适合构建结构化 HTML 片段：
示例：
const user = { name: '张三', avatar: '/img/1.jpg', isActive: true };
const html = `
<div class="user-card ${user.isActive ? 'active' : ''}">
<img src="${user.avatar}" alt="${user.name}">
<h3>${user.name}</h3>
<span>状态：${user.isActive ? '在线' : '离线'}</span>
</div>
`;
注意：变量值若含用户输入，直接插入存在 XSS 风险——需先转义或改用更安全方式（见下条）。
立即学习“Java免费学习笔记（深入）”；
插入 DOM 的推荐方式
避免直接赋值 innerHTML（尤其对不可信内容），优先使用以下方法：
-
insertAdjacentHTML(position, htmlString)：精准插入到指定位置（'beforebegin'、'afterbegin'等），不重绘父容器，性能更好 -
element.innerHTML = html：简单直接，但会销毁已有子节点事件监听器，且有 XSS 风险 -
搭配
DOMParser或textContent转义后再拼接：处理用户输入时，先对变量做 HTML 实体编码（如用document.createElement('div').textContent = str提取安全文本）
避免常见陷阱
模板字符串不是万能的，几个容易出错的地方：
- 变量为
null或undefined时，插值结果是字符串"null"或"undefined"，建议提前默认值：${user.name || '匿名'} - 嵌套结构复杂时，不要在模板中写大量逻辑，可先计算好数据再传入，保持模板纯净
- 如果需要响应式更新，模板字符串是一次性渲染，后续修改需重新生成 + 替换，不适合高频更新场景（此时应考虑
document.createElement或框架）
轻量替代方案：用 createElement 更安全
对少量动态元素，直接操作 DOM API 更可控、无 XSS 风险：
const el = document.createElement('div');
el.className = `user-card ${user.isActive ? 'active' : ''}`;
el.innerHTML = `
<img src="${escapeHtml(user.avatar)}" alt="${escapeHtml(user.name)}">
<h3>${escapeHtml(user.name)}</h3>
`;
// 然后 appendTo 目标容器
其中 escapeHtml 可简单实现为：
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
} 
