如何在HTML中嵌入和显示XML数据_HTML中嵌入显示XML数据技巧-XML/RSS教程-PHP中文网

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

星降

发布： 2025-11-17 16:52:00

原创

646人浏览过

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

如何在html中嵌入和显示xml数据_html中嵌入显示xml数据技巧

在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解析。

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

操作方式：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

将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>

登录后复制