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 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 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制作静态网站的模板框架
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
JS的replace方法介绍
2012/10/20 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
深入理解python函数递归和生成器
2016/06/06 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python 查看文件的读写权限方法
2018/01/23 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
编辑找工作求职信分享
2014/01/03 职场文书
销售内勤岗位职责
2014/04/15 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
2014年公路养护工作总结
2014/12/04 职场文书