怎么在HTML中通过template literals拼接HTML字符串构建动态模板-html教程-PHP中文网

template literals 本身不能直接插入 html 到页面中，仅生成普通字符串，需配合 innerhtml（须手动转义）、createelement（自动转义）或 template 元素等安全方式使用。

怎么在html中通过template literals拼接html字符串构建动态模板

template literals 本身不能直接插入 HTML 到页面中

JavaScript 的 template literals（反引号字符串）只是生成普通字符串，哪怕内容是 HTML 标签，浏览器也不会自动解析渲染。你写 `<div>${name}</div>`，得到的是一个字符串，不是 DOM 节点。

常见错误现象：element.innerHTML = `<p>Hello</p>` 看似“生效”，但若 name 来自用户输入，就可能触发 XSS；更隐蔽的问题是：没做转义时，${userInput} 中的 <script></script> 会被执行。

使用场景：适合快速拼接结构简单、数据完全可信的模板（如内部管理后台的静态预览）
不推荐用于用户可控字段的直接插值
性能上无额外开销，但安全风险远大于便利性

innerHTML + template literals 是最常用但需手动转义的组合

如果你坚持用 innerHTML，必须自己处理 HTML 转义，否则等于敞开 XSS 大门。原生 JS 没有内置 escapeHTML，得手写或借助小函数：

function escapeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/, '/g, '>')
    .replace(/"/g, '"')
    .replace(/'/g, ''');
}

const name = '<script>alert(1)</script>张三';
const html = `<p>姓名：${escapeHTML(name)}</p>`;
element.innerHTML = html;

注意：这个函数只覆盖常见字符，不处理 Unicode 变体或富文本嵌套。如果字段含链接、样式等复杂内容，innerHTML 就不该是首选。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

更安全的替代方案：用 createElement + append 构建动态结构

绕过字符串拼接，从根本上杜绝 XSS。虽然代码稍长，但逻辑清晰、类型安全、可调试性强：

const item = document.createElement('li');
item.className = 'user-item';
item.textContent = name; // 自动转义文本内容

const avatar = document.createElement('img');
avatar.src = avatarUrl;
avatar.alt = 'avatar';

item.append(avatar);
listElement.append(item);

所有动态内容走 textContent 或 setAttribute，不会被解析为 HTML
需要设置 HTML 属性（如 innerHTML、src、href）时，确保来源可信或做过校验
多次 append 比反复赋值 innerHTML 性能略低，但现代浏览器优化后差异可忽略

复杂模板建议交给原生 `<template></template>` 元素或轻量库

当结构超过 3 层嵌套、条件分支多、还要复用时，硬拼 template literals 很快变得难读难维护。原生 <template></template> 是专为此设计的：

<template id="user-card"><article class="card"><h3 class="name"></h3>
    <p class="bio"></p>
  </article></template>

然后用 JS 克隆填充：

const tmpl = document.getElementById('user-card').content;
const clone = document.importNode(tmpl, true);
clone.querySelector('.name').textContent = user.name;
clone.querySelector('.bio').textContent = user.bio;
container.append(clone);

这种方式既保留 HTML 的可读性，又避免字符串拼接的脆弱性；比手写 createElement 更贴近设计稿，也比第三方模板引擎轻量得多。

真正容易被忽略的是：哪怕用了 <template></template>，只要最后用 innerHTML 填充某个子节点，XSS 风险就立刻回归——安全链条中最弱的一环，决定整体水位。