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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
jQuery常用选择器详解
Jul 17 jQuery
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
使用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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
4.与数据库的连接
2006/10/09 PHP
php自动跳转中英文页面
2008/07/29 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
详解django中使用定时任务的方法
2018/09/27 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python使用Matlab命令过程解析
2020/06/04 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
公司道歉信范文
2014/01/09 职场文书
创建文明学校实施方案
2014/03/11 职场文书
房地产活动策划方案
2014/05/14 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
学期个人自我总结
2015/02/13 职场文书
入党积极分子个人总结
2015/03/02 职场文书