本教程旨在解决在JavaScript中动态插入从数据库获取的HTML字符串（如标签）时，内容未能正确渲染为图片或其他HTML元素，反而显示为纯文本的问题。核心解决方案在于理解并正确使用innerHTML属性替代createTextNode()方法，以确保浏览器能够解析并呈现作为字符串传递的HTML内容，同时强调了使用innerHTML时的安全注意事项。
1. 问题背景与现象分析
在前端开发中，我们经常需要从后端API或数据库获取包含HTML标签（例如、、等）的文本内容，并将其动态地插入到网页中。然而，一个常见的误区是使用document.createTextNode()方法来处理这些HTML字符串。
考虑以下场景：您从数据库中获取到用户的消息内容，其中包含用户的头像图片标签，例如：
@@##@@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标签字符串，例如：
立即学习“Java免费学习笔记（深入）”；
@@##@@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);}
代码解释：
let child = document.createElement(“div”);：这行代码创建了一个新的div元素，作为容器。child.innerHTML = divPicture + divName + “: ” + divText;：这是关键的改动。我们将包含
标签字符串（divPicture）以及其他文本内容拼接成一个完整的HTML字符串，然后将其赋值给child元素的innerHTML属性。浏览器在接收到这个字符串后，会将其中的标签解析为一个实际的图片元素，并正确加载图片源。document.getElementById(“myDiv”).appendChild(child);：最后，将这个包含正确渲染内容的child元素添加到页面上的目标myDiv中。
通过这种方式，当divPicture是一个完整的标签字符串时，它将被浏览器识别并渲染为一张图片，而不是纯文本。
3. createTextNode 与 innerHTML 的对比
理解两者之间的根本区别对于正确的DOM操作至关重要：
功能创建一个文本节点。设置或获取元素的HTML内容。处理方式将所有内容视为纯文本，对HTML特殊字符进行转义。将内容解析为HTML结构，创建DOM节点。安全性默认安全，可有效防止XSS攻击（因为不解析HTML）。存在XSS风险，如果内容来自不可信源，必须进行净化。适用场景插入纯文本内容，特别是用户输入，确保内容按字面显示。插入包含HTML标签的字符串，需要浏览器解析和渲染HTML。
4. 注意事项与最佳实践
安全性（XSS防护）： 使用innerHTML时，如果传入的HTML字符串来源于用户输入或任何不可信的外部源，务必进行严格的服务器端净化（Sanitization）。恶意用户可能会注入包含JavaScript代码的HTML（如标签或事件属性），从而引发跨站脚本攻击。虽然在客户端进行一些简单的过滤是可能的，但最可靠的防护措施始终在后端进行。性能考量： 对于非常大或频繁更新的HTML字符串，反复修改innerHTML可能会导致性能问题，因为它涉及到DOM的重新解析和重绘。在这种情况下，考虑使用document.createElement()、appendChild()、insertBefore()等原生DOM操作方法来构建和修改DOM树，它们通常更高效。然而，对于像聊天消息这样相对较小的HTML片段，innerHTML的便利性通常优于其潜在的性能劣势。何时仍使用 createTextNode： 当您确定要插入的内容就是纯文本，且不希望其中任何字符被解释为HTML标签时，createTextNode仍然是首选。例如，显示用户输入的评论，其中可能包含符号，但您不希望它们被渲染为HTML。
5. 总结
在JavaScript中动态生成并插入HTML内容时，正确选择DOM操作方法至关重要。当您需要将包含HTML标签的字符串（例如从数据库获取的标签）解析并渲染为实际的HTML元素时，请使用元素的innerHTML属性。而当您仅需插入纯文本内容，并希望避免任何HTML解析时，则应使用document.createTextNode()。始终牢记innerHTML可能带来的安全风险，并对来自不可信源的数据进行严格的服务器端净化。
以上就是JavaScript动态插入HTML：正确渲染图片与富文本内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514459.html
微信扫一扫 
支付宝扫一扫 
![Go语言接口与切片：如何识别和操作[]interface{}](https://cdn.chuangxiangniao.com/www/2025/12/176369856569294-1.jpg?imageMogr2/crop/480x300/gravity/center)
