使用XMLHttpRequest获取XML数据时如何保留内置HTML标签的渲染效果

你的实现思路整体方向是对的，出现样式失效的问题可以从以下几个点排查修复：

1. 修正HTML嵌套错误 #

你当前是把包含<div>的内容插入到了<p id="text"></p>内部，而HTML规范明确规定<p>标签属于短语内容容器，不能嵌套<div>这类块级元素。浏览器遇到非法嵌套时会自动提前闭合外层的<p>标签，导致最终DOM结构和预期不符，即使能看到<b>、<i>标签存在，也可能受异常结构影响样式继承。
把index.html中的容器替换为块级元素即可：

<div id="text"></div>

2. 检查全局样式重置规则 #

这是最高概率的触发原因。目前绝大多数前端项目都会引入样式重置逻辑，其中很常见的配置就是清除标签默认样式：

b, strong { font-weight: normal; }
i, em { font-style: normal; }

你可以打开Chrome开发者工具的Elements面板，选中插入的<b>标签，切换到「计算样式」页查看font-weight属性，如果值不是700（bold对应的数值），就说明默认样式被覆盖了，手动补充对应规则即可：

#text b { font-weight: bold; }
#text i { font-style: italic; }

3. 排查XML命名空间影响（低概率） #

如果你的服务器返回text.xml时的响应头Content-Type设置为application/xml，部分浏览器会把XML里的<b>、<i>识别为XML自定义元素而非HTML元素，导致不会命中HTML标签的默认样式。你可以将服务器的响应头调整为text/plain，或者直接使用.txt后缀存储这段HTML内容，避免XML命名空间的干扰。

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