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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
js中call与apply的用法小结
Dec 28 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
vuex的module模块用法示例
Nov 12 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 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
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
php简单截取字符串代码示例
2016/10/19 PHP
javascript引导程序
2008/10/26 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python遍历目录的4种方法实例介绍
2015/04/13 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
浅谈python出错时traceback的解读
2020/07/15 Python
python图片合成的示例
2020/11/09 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
监理资料员岗位职责
2014/01/03 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
整改通知书格式
2015/04/22 职场文书
九九重阳节致辞
2015/07/31 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技