JS实现读取xml内容并输出到div中的方法示例
程序员文章站
2022-12-02 15:35:56
本文实例讲述了js实现读取xml内容并输出到div中的方法。分享给大家供大家参考,具体如下:
note.xml文件结构:
本文实例讲述了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.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>
运行效果:
ps:这里再为大家提供几款关于xml操作的在线工具供大家参考使用:
在线xml/json互相转换工具:
在线格式化xml/在线压缩xml:
xml在线压缩/格式化工具:
xml代码在线格式化美化工具:
更多关于javascript相关内容可查看本站专题:《javascript操作xml文件技巧总结》、《javascript文件与目录操作技巧汇总》、《javascript中ajax操作技巧总结》、《javascript错误与调试技巧总结》及《javascript数据结构与算法技巧总结》
希望本文所述对大家javascript程序设计有所帮助。