JS实现读取xml内容并输出到div中的方法示例

2019-11-19 14:00:03

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现读取xml内容并输出到div中的方法。分享给大家供大家参考，具体如下：

note.xml文件结构:

<nooo><note><to>George</to><from>John</from><heading>Reminder</heading><body>Don't forget the meeting!</body></note><note><to>a</to><from>John</from><heading>Reminder</heading><body>Don't forget the meeting!</body></note><note><to>George</to><from>John</from><heading>Reminder</heading><body>Don't forget the meeting!</body></note></nooo>

利用js将xml输出到div中：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>www.VeVB.COm js读取xml</title>    <style>     .aaaa{width: 30%;height: 50px;line-height: 50px;text-align: center;border: 1px solid darkblue;float: left;}    </style>  </head>  <body>    <div id="xmlid"></div>    <script>      xmltext = new XMLHttpRequest;      xmltext.open("GET","note.xml",false);      xmltext.send();      a = xmltext.responseXML;      //document.getElementById("xmlid").innerHTML = a.getElementsByTagName("to")[2].childNodes[0].nodeValue;      x = a.getElementsByTagName("note");      for(i=0;i<x.length;i++)      {        document.write("<div class='aaaa'>");        document.write(x[i].getElementsByTagName("to")[0].childNodes[0].nodeValue);        document.write("</div>");        document.write("<div class='aaaa'>");        document.write(x[i].getElementsByTagName("heading")[0].childNodes[0].nodeValue);        document.write("</div>");        document.write("<div class='aaaa'>");        document.write(x[i].getElementsByTagName("body")[0].childNodes[0].nodeValue);        document.write("</div>");      }    </script>  </body></html>

运行效果：