如何在HTML中嵌入和显示XML数据_HTML中嵌入显示XML数据技巧

通过JavaScript解析XML数据并插入HTML页面，可实现XML内容的展示。常用方法包括：使用XMLHttpRequest或fetch API加载外部XML文件，利用DOMParser处理内联XML字符串，或结合XSLT样式表转换XML为HTML结构。其中，JavaScript负责获取与解析，DOM操作用于动态渲染结果。

在HTML中直接显示或处理XML数据，通常需要借助JavaScript来解析XML内容，并将结果插入到页面中。HTML本身不支持直接渲染XML结构，但通过一些技巧可以实现数据的读取与展示。

使用JavaScript加载并解析XML数据

最常见的方式是利用XMLHttpRequest或fetch API获取XML文件，然后用DOM方法解析内容。

示例：

<font color="#000080"><script></font>
<font color="#0000FF">function</font> loadXML() {
  <font color="#0000FF">const</font> xhr = <font color="#0000FF">new</font> XMLHttpRequest();
  xhr.open('GET', 'data.xml', <font color="#0000FF">true</font>);
  xhr.onreadystatechange = <font color="#0000FF">function</font>() {
    <font color="#0000FF">if</font> (xhr.readyState === 4 && xhr.status === 200) {
      <font color="#0000FF">const</font> xmlDoc = xhr.responseXML;
      <font color="#0000FF">const</font> items = xmlDoc.getElementsByTagName('item');
      <font color="#0000FF">let</font> output = '';
      <font color="#0000FF">for</font> (<font color="#0000FF">let</font> i = 0; i < items.length; i++) {
        output += '<p>' + items[i].textContent + '</p>';
      }
      document.getElementById('content').innerHTML = output;
    }
  };
  xhr.send();
}
<font color="#000080"></script></font>
<font color="#000080"><div id="content"></div></font>
<font color="#000080"><script></font>loadXML();<font color="#000080"></script></font>

内联XML数据作为字符串处理

如果XML数据量小，可以直接写在HTML中作为一个字符串，再用DOMParser解析。

立即学习“前端免费学习笔记（深入）”；

操作方式：

PaperFake

AI写论文

下载

• 将XML内容放在script type="text/xml"标签中避免执行
• 使用DOMParser转换为可操作的XML文档对象

示例：

<font color="#000080"><script type="text/xml" id="xml-data"></font>
<items>
  <item>苹果</item>
  <item>香蕉</item>
</items>
<font color="#000080"></script></font>

<font color="#000080"><script></font>
<font color="#0000FF">const</font> xmlString = document.getElementById('xml-data').innerHTML;
<font color="#0000FF">const</font> parser = <font color="#0000FF">new</font> DOMParser();
<font color="#0000FF">const</font> xmlDoc = parser.parseFromString(xmlString, 'text/xml');
<font color="#0000FF">const</font> items = xmlDoc.getElementsByTagName('item');
<font color="#0000FF">let</font> output = '';
<font color="#0000FF">for</font> (<font color="#0000FF">let</font> i = 0; i < items.length; i++) {
  output += '<p>' + items[i].textContent + '</p>';
}
document.getElementById('inline-content').innerHTML = output;
<font color="#000080"></script></font>
<font color="#000080"><div id="inline-content"></div></font>

使用XSLT样式表转换XML为HTML（高级用法）

若希望浏览器直接渲染XML为HTML结构，可以配合XSLT（可扩展样式语言转换）。该方法适合静态展示场景。

步骤简述：

• 在XML文件顶部引用XSLT样式表：
  <?xml-stylesheet type="text/xsl" href="style.xsl"?>
• XSL文件定义如何将每个XML元素转为HTML标签
• 用户访问XML文件时，浏览器自动应用转换

注意：现代前端开发较少使用XSLT，但在某些企业系统中仍有应用。