如何用JavaScript将数据库中HTML字符串渲染到DIV？DOMParser使用异常

兄弟，你这问题其实是在DOMParser的使用上踩了个小坑，而且其实没必要绕这么大弯子～先给你捋清楚问题所在，再给你两种简单的解决办法：

首先看你代码里的明显错误：你最后把parser（也就是DOMParser的实例对象）直接赋值给emailBodyArea的innerHTML了，这当然会显示[htmlObject]啊——你放进去的是个工具对象，不是解析后的HTML内容，浏览器根本不知道怎么渲染它。

针对你的场景（数据库里存的是转义后的HTML字符串，比如<p>Dear Friends</p> <h1> You have got invitation </h1>），其实有两种简单的处理方式：

方法一：直接赋值innerHTML（最简便） #

浏览器本身就支持自动解析HTML实体（比如把<转换成<），所以你根本不需要用DOMParser，直接把转义后的字符串赋值给目标DIV的innerHTML就行。

假设你的controlID元素里存的是转义后的HTML文本，代码可以这么写：

// 注意用textContent获取原始的转义字符串，避免提前解析
const escapedHtml = document.getElementById(controlID).textContent;
// 直接赋值给目标元素，浏览器会自动把实体转换成真实标签
document.getElementById("emailBodyArea").innerHTML = escapedHtml;

方法二：正确使用DOMParser（如果一定要用的话） #

如果你坚持要用DOMParser，那得正确提取解析后的内容，而不是把工具实例丢进去。步骤很简单：

1. 用DOMParser把转义字符串解析成完整的HTML文档对象
2. 取出这个文档里body部分的内容，再赋值给目标元素

代码示例：

const escapedHtml = document.getElementById(controlID).textContent;
const parser = new DOMParser();
// 解析转义字符串为HTML文档
const htmlDoc = parser.parseFromString(escapedHtml, "text/html");
// 取出body内的所有内容，赋值给目标元素
document.getElementById("emailBodyArea").innerHTML = htmlDoc.body.innerHTML;

这样就能正常渲染出带<p>和<h1>标签的HTML内容啦～

内容的提问来源于stack exchange，提问作者user3513192