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


Posted in Javascript onApril 19, 2018

本文实例讲述了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>3water.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>

运行效果:

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

Javascript 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
Node.js事件驱动
Jun 18 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 #Javascript
Angular 封装并发布组件的方法示例
Apr 19 #Javascript
angular第三方包开发整理(小结)
Apr 19 #Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 #Javascript
原生js实现拖拽功能基本思路详解
Apr 18 #Javascript
You might like
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
捕获关闭窗口的脚本
2009/01/10 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
js实现3D旋转相册
2020/08/02 Javascript
python 字符串格式化代码
2013/03/17 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
常见python正则用法的简单实例
2016/06/21 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python实现Floyd算法
2018/01/03 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
python绘制彩虹图
2019/12/16 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
安全承诺书范文
2014/03/26 职场文书
三人合伙协议书范本
2014/10/29 职场文书
个人总结格式范文
2015/03/09 职场文书
研究生导师推荐信
2015/03/25 职场文书
2016年情人节问候语
2015/11/11 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
maven依赖的version声明控制方式
2022/01/18 Java/Android