在实际的前端开发场景中，经常会遇到需要把XML格式的数据展示在HTML页面上的需求，比如展示接口返回的XML配置信息、历史数据存档等。不同的业务场景适合不同的实现方案，下面会逐一介绍常见的实现方式。
方案一：XML作为纯文本直接展示
如果只是需要把XML的原始内容完整展示在页面上，不需要解析其中的节点信息，可以直接把XML内容放到<pre>标签中，这样能保留XML的原始格式，包括换行和缩进。
<pre id="xmlTextContainer">
<?xml version="1.0" encoding="UTF-8"?>
<user>
<name>张三</name>
<age>25</age>
<email>test@ipipp.com</email>
</user>
</pre>这种方式实现最简单，但是无法对XML内容进行结构化处理，适合只需要查看原始数据的场景。
方案二：JavaScript解析XML后动态渲染
如果需要把XML中的节点数据提取出来，按照自定义的样式展示，可以使用JavaScript的DOMParser来解析XML字符串，再遍历节点生成HTML内容。
首先准备XML字符串和HTML容器：
<div id="xmlRenderContainer"></div>
<script>
// 待解析的XML字符串
const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
<user>
<name>张三</name>
<age>25</age>
<email>test@ipipp.com</email>
</user>`;
</script>然后使用DOMParser解析XML并渲染到页面：
// 创建XML解析器
const parser = new DOMParser();
// 解析XML字符串，得到XML文档对象
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
// 获取容器元素
const container = document.getElementById("xmlRenderContainer");
// 提取name节点内容
const name = xmlDoc.getElementsByTagName("name")[0].textContent;
// 提取age节点内容
const age = xmlDoc.getElementsByTagName("age")[0].textContent;
// 提取email节点内容
const email = xmlDoc.getElementsByTagName("email")[0].textContent;
// 拼接HTML内容
const htmlContent = `用户信息
- 姓名：${name}
- 年龄：${age}
- 邮箱：${email}
这种方式可以灵活控制展示的样式和结构，适合需要对XML数据进行加工展示的场景。
方案三：使用XSLT转换XML为HTML
XSLT是专门用于转换XML文档的语言，可以预先定义转换规则，把XML直接转换为对应的HTML内容，不需要手动写JavaScript解析逻辑。
首先定义XSLT转换规则，保存为user.xsl文件（这里以内联方式展示）：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h3>用户信息</h3>
<ul>
<li>姓名：<xsl:value-of select="user/name"/></li>
<li>年龄：<xsl:value-of select="user/age"/></li>
<li>邮箱：<xsl:value-of select="user/email"/></li>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>然后在HTML中使用JavaScript加载XML和XSLT，执行转换：
// 加载XML文档
function loadXMLDoc(url) {
const xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, false);
xmlhttp.send("");
return xmlhttp.responseXML;
}
// 加载XSLT文档
function loadXSLDoc(url) {
const xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, false);
xmlhttp.send("");
return xmlhttp.responseXML;
}
// 执行XSLT转换
function displayResult() {
const xml = loadXMLDoc("user.xml"); // 假设XML文件路径为user.xml
const xsl = loadXSLDoc("user.xsl");
// 判断浏览器是否支持XSLT转换
if (window.ActiveXObject || (typeof XSLTProcessor !== "undefined")) {
if (typeof XSLTProcessor !== "undefined") {
const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
const resultDocument = xsltProcessor.transformToDocument(xml);
document.getElementById("xsltContainer").appendChild(resultDocument.documentElement);
} else {
const result = xml.transformNode(xsl);
document.getElementById("xsltContainer").innerHTML = result;
}
}
}
// 页面加载完成后执行转换
window.onload = displayResult;这种方式适合转换规则固定、XML结构稳定的场景，但是XSLT的语法学习成本相对较高。
注意事项
- XML文件的编码需要和HTML页面的编码一致，避免出现乱码问题，推荐都使用UTF-8编码。
- 如果XML数据来自其他域名，需要注意跨域问题，可以通过后端代理或者配置CORS解决。
- 直接在HTML中嵌入XML字符串时，要注意转义<、>等特殊字符，避免被浏览器解析为HTML标签。
- 如果是从接口获取XML数据，需要先确认接口返回的Content-Type是
application/xml或者text/xml，保证解析正确。
HTMLXMLJavaScriptDOM解析修改时间：2026-06-06 14:38:55