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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
JavaScript实现密码强度实时验证
Mar 18 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
Node.js简单入门前传
2017/08/21 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
在django中,关于session的通用设置方法
2019/08/06 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Python如何绘制日历图和热力图
2020/08/07 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
运动会广播稿300字
2014/01/10 职场文书
优秀学生获奖感言
2014/02/15 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
golang连接MySQl使用sqlx库
2022/04/14 Golang