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 相关控件的事件操作分解
Aug 03 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
Echarts如何重新渲染实例详解
May 30 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设计模式 php实现门面模式(Facade)
2015/12/07 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
eval与window.eval的差别分析
2011/03/17 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
javascript闭包入门示例
2014/04/30 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
python读写二进制文件的方法
2015/05/09 Python
对python函数签名的方法详解
2019/01/22 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
大学毕业自我评价
2014/02/02 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
开学第一周总结
2015/07/16 职场文书
班主任寄语2016
2015/12/04 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
欧元符号 €
2022/02/17 杂记