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代码片段收集
Jul 12 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
Javascript玩转继承(二)
May 08 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 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 错误之引号中使用变量
2009/05/04 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
JS画线(实例代码)
2013/11/20 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
python-opencv颜色提取分割方法
2018/12/08 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
自愿解除劳动合同协议书
2014/09/11 职场文书
研究生个人学年总结
2015/02/14 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
pt-archiver 主键自增
2022/04/26 MySQL