登录
首页 >  文章 >  前端

JavaScript动态加载图片与富文本技巧

时间：2025-08-21 18:42:34 370浏览 收藏

还在为JavaScript动态渲染图片和富文本发愁吗？本文为你提供解决方案！当从数据库获取包含HTML标签（如`JavaScript动态加载图片与富文本技巧`）的字符串时，直接使用`createTextNode()`会导致内容显示为纯文本而非图片。本文深入剖析了问题根源，并提供有效方法：利用`innerHTML`属性让浏览器正确解析并渲染HTML内容。同时，强调了使用`innerHTML`时的安全风险，特别是XSS攻击的防范，建议进行服务器端净化。此外，文章还对比了`createTextNode()`与`innerHTML`的特性、适用场景，并探讨了性能考量，助你选择合适的DOM操作方法，安全高效地实现JavaScript动态渲染图片与富文本。

JavaScript动态插入HTML：正确渲染图片与富文本内容

本教程旨在解决在JavaScript中动态插入从数据库获取的HTML字符串（如标签）时，内容未能正确渲染为图片或其他HTML元素，反而显示为纯文本的问题。核心解决方案在于理解并正确使用innerHTML属性替代createTextNode()方法，以确保浏览器能够解析并呈现作为字符串传递的HTML内容，同时强调了使用innerHTML时的安全注意事项。

1. 问题背景与现象分析

在前端开发中，我们经常需要从后端API或数据库获取包含HTML标签（例如、、等）的文本内容，并将其动态地插入到网页中。然而，一个常见的误区是使用document.createTextNode()方法来处理这些HTML字符串。

考虑以下场景：您从数据库中获取到用户的消息内容，其中包含用户的头像图片标签，例如：

<img src='uploads/defaultpp.png' alt='Profile Picture' width='500' height='600'>username: text

当您尝试使用JavaScript将其插入到DOM中时，如果采用了类似以下的代码：

function createDiv(divText, divName, divPicture, name){
    let child = document.createElement("div");      
    let content = document.createTextNode(divPicture + divName  + ": " + divText);  

    child.appendChild(content);         
    document.getElementById("myDiv").appendChild(child);
}

您会发现，页面上显示的不是一张图片和后续的文本，而是原封不动的HTML标签字符串，例如：

<img src='uploads/defaultpp.png' alt='Profile Picture' width='500' height='600'>username: text

这是因为createTextNode()方法的作用是将传入的字符串视为纯文本内容。它会对字符串中的HTML特殊字符（如<、>、&等）进行转义，将其转换为对应的HTML实体（例如<会被转义为<，>会被转义为>）。这样做的目的是为了防止跨站脚本攻击（XSS），并确保纯文本内容不会被浏览器误解析为HTML标签。然而，当我们的意图就是渲染HTML标签时，这种转义行为反而成了障碍。

2. 解决方案：利用 innerHTML 属性

要正确地将包含HTML标签的字符串解析并渲染为实际的HTML元素，我们应该使用元素的innerHTML属性。innerHTML属性允许您设置或获取一个元素内部的HTML内容。当您向innerHTML赋一个字符串时，浏览器会将其解析为HTML结构，并创建相应的DOM节点。

将上述createDiv函数修改为使用innerHTML，即可解决问题：

function createDiv(divText, divName, divPicture, name){
    let child = document.createElement("div");
    // 使用 innerHTML 将包含 HTML 标签的字符串直接插入到 div 元素中
    child.innerHTML = divPicture + divName  + ": " + divText;      
    document.getElementById("myDiv").appendChild(child);
}

代码解释：

通过这种方式，当divPicture是一个完整的标签字符串时，它将被浏览器识别并渲染为一张图片，而不是纯文本。

3. createTextNode 与 innerHTML 的对比

理解两者之间的根本区别对于正确的DOM操作至关重要：

特性createTextNode()innerHTML
功能创建一个文本节点。设置或获取元素的HTML内容。
处理方式将所有内容视为纯文本，对HTML特殊字符进行转义。将内容解析为HTML结构，创建DOM节点。
安全性默认安全，可有效防止XSS攻击（因为不解析HTML）。存在XSS风险，如果内容来自不可信源，必须进行净化。
适用场景插入纯文本内容，特别是用户输入，确保内容按字面显示。插入包含HTML标签的字符串，需要浏览器解析和渲染HTML。

4. 注意事项与最佳实践

  1. 安全性（XSS防护）： 使用innerHTML时，如果传入的HTML字符串来源于用户输入或任何不可信的外部源，务必进行严格的服务器端净化（Sanitization）。恶意用户可能会注入包含JavaScript代码的HTML（如
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
    立即学习 543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
    立即学习 516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
    立即学习 500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    立即学习 487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
    立即学习 485次学习