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 06 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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输出XML到页面的3种方法详解
2013/06/06 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python的print用法示例
2014/02/11 Python
Python中正则表达式详解
2017/05/17 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
五型班组建设方案
2014/02/10 职场文书
公司建议书怎么写
2014/05/15 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
小鞋子观后感
2015/06/05 职场文书
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技