JS實現(xiàn)讀取xml內(nèi)容并輸出到div中的方法示例

2019-11-19 14:00:03

字體：大中小

供稿：網(wǎng)友

本文實例講述了JS實現(xiàn)讀取xml內(nèi)容并輸出到div中的方法。分享給大家供大家參考，具體如下：

note.xml文件結(jié)構(gòu):

<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.survivalescaperooms.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>

運行效果：