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

發(fā)布時間：2020-08-28 16:13:36 來源：腳本之家閱讀：214 作者：包子源欄目：web開發(fā)

本文實例講述了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.jb51.net 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>

運行效果：

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

PS：這里再為大家提供幾款關(guān)于xml操作的在線工具供大家參考使用：

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

在線格式化XML/在線壓縮XML：
http://tools.jb51.net/code/xmlformat

XML在線壓縮/格式化工具：
http://tools.jb51.net/code/xml_format_compress

XML代碼在線格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作XML文件技巧總結(jié)》、《JavaScript文件與目錄操作技巧匯總》、《JavaScript中ajax操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽