在 HTML 页面中显示 XML 数据

在 HTML 页面中显示 XML 数据通常需要将 XML 数据转换为可视的格式，例如使用 HTML 表格或其他元素。你可以使用 JavaScript 来解析 XML 并创建相应的 HTML 元素来显示数据。

以下是一个基本的示例，演示如何使用 JavaScript 在 HTML 页面中显示 XML 数据：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display XML in HTML</title>
</head>
<body>

<div id="xmlDisplay"></div>

<script>
// 一个包含 XML 数据的字符串
var xmlString = `
  <library>
    <book>
      <title>Harry Potter</title>
      <author>J.K. Rowling</author>
      <price>29.99</price>
    </book>
    <book>
      <title>The Hobbit</title>
      <author>J.R.R. Tolkien</author>
      <price>19.99</price>
    </book>
  </library>
`;

// 解析 XML 字符串为 XML 文档对象
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

// 在页面中创建 HTML 表格并填充数据
var table = document.createElement("table");
var headerRow = table.createTHead().insertRow(0);

// 创建表头
var headers = ["Title", "Author", "Price"];
for (var i = 0; i < headers.length; i++) {
  var headerCell = headerRow.insertCell(i);
  headerCell.textContent = headers[i];
}

// 遍历 XML 数据并创建表格行
var books = xmlDoc.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
  var book = books[i];
  var row = table.insertRow(i + 1);

  // 遍历每本书的数据
  var title = book.getElementsByTagName("title")[0].textContent;
  var author = book.getElementsByTagName("author")[0].textContent;
  var price = book.getElementsByTagName("price")[0].textContent;

  // 将数据填充到表格行
  var cell1 = row.insertCell(0);
  cell1.textContent = title;

  var cell2 = row.insertCell(1);
  cell2.textContent = author;

  var cell3 = row.insertCell(2);
  cell3.textContent = price;
}

// 将表格添加到页面中
document.getElementById("xmlDisplay").appendChild(table);
</script>

</body>
</html>

在这个例子中，JavaScript 部分解析了包含 XML 数据的字符串，然后创建了一个 HTML 表格，并将 XML 数据填充到表格中。最后，将表格添加到页面中的 <div id="xmlDisplay"> 元素中。

这只是一个基本示例，实际上你可以根据需要使用更复杂的 HTML 结构和样式来显示 XML 数据。

转载请注明出处：http://www.pingtaimeng.com/article/detail/12126/XML