当前位置：首页 > 前端开发 > 正文

JS中如何嵌入HTML代码

admin
前端开发
2025-06-10
3208

在JavaScript中嵌入HTML代码可通过多种方式实现：使用 innerHTML属性直接插入HTML字符串；通过 document.write()在文档流中写入内容；利用DOM方法如 createElement()和 appendChild()动态创建节点，这些方法适用于不同场景，需注意避免XSS安全风险。

在JavaScript中嵌入HTML代码是前端开发的核心技能之一，尤其适用于动态内容生成、单页面应用（SPA）和实时数据更新等场景,以下是几种主流方法及详细实践指南：

基础方法：`innerHTML` 属性

适用场景：快速插入简单HTML片段。
示例：

const container = document.getElementById("app");
container.innerHTML = `
  <div class="card">
    <h2>标题</h2>
    <p>动态生成的内容</p>
  </div>
`;

优点：

语法简洁，直接拼接字符串。
支持完整的HTML标签解析。

风险：

XSS攻击破绽：若嵌入用户输入内容未过滤，可能导致脚本注入（如<script>alert('hack')</script>）。
安全建议：

// 使用textContent转义用户输入
const userInput = "<script>反面代码</script>";
container.textContent = userInput; // 自动转义为纯文本

DOM操作API

适用场景：对性能或安全性要求高的场景（如频繁更新内容）。
核心API：

document.createElement()
appendChild() / insertBefore()
setAttribute()

示例：

JS中如何嵌入HTML代码第1张

const card = document.createElement("div");
card.className = "card";
const title = document.createElement("h2");textContent = "动态标题";
const content = document.createElement("p");
content.textContent = "安全的内容";
card.appendChild(title);
card.appendChild(content);
document.body.appendChild(card);

优点：

完全避免XSS风险（自动转义文本）。
精准控制DOM结构。

缺点：

代码量较大,结构复杂时维护成本高。

模板字符串（Template Literals）

适用场景：需要混合变量与HTML的多行字符串。
示例：

const userName = "Alice";
const htmlContent = `
  <div class="welcome">
    <p>欢迎, ${userName}!</p>
    <small>登录时间: ${new Date().toLocaleTimeString()}</small>
  </div>
`;
document.getElementById("header").innerHTML = htmlContent;

注意：

仍需警惕变量中的未过滤内容（结合textContent使用更安全）。

高级方案：模板引擎

适用场景：复杂项目需逻辑分离（如循环、条件判断）。
推荐库：Handlebars、Mustache、EJS。

Handlebars示例：

引入库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>

定义模板：

<script id="template" type="text/x-handlebars-template">
<ul>
 {{#each items}}
   <li>{{name}} - {{price}}元</li>
 {{/each}}
</ul>
</script>

编译并渲染：

const template = Handlebars.compile(document.getElementById("template").innerHTML);
const data = { items: [{name: "苹果", price: 5}, {name: "香蕉", price: 3}] };
document.getElementById("list").innerHTML = template(data);

优势：

逻辑与UI分离，提升可维护性。
内置转义机制防XSS。

安全性强化实践

避免document.write()：
- 会覆盖整个文档流，且同步加载阻塞页面（已淘汰），安全策略（CSP）**：
  在HTTP头添加：
```
Content-Security-Policy: default-src 'self'
```
  阻止外部脚本注入。

DOMPurify库：
对用户输入的HTML进行过滤：

import DOMPurify from 'dompurify';
container.innerHTML = DOMPurify.sanitize(userInput);

现代框架的解决方案

React：使用JSX（编译为虚拟DOM）

function Component() {
  return <div>Hello {userName}</div>;
}

Vue：v-html指令（慎用）
```
<div v-html="sanitizedHTML"></div>
```
Angular：[innerHTML]绑定
```
<div [innerHTML]="safeHTML"></div>
```
原则：框架内置的安全机制优于原生innerHTML。

方法	安全等级	性能
DOM操作API	高	高频更新、安全敏感项目
模板引擎	中	复杂逻辑与数据绑定
模板字符串	高	简单动态内容（需手动转义）
innerHTML	中	或内部系统