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 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
jquery tab标签页的制作
May 10 Javascript
javascript代码加载优化方法
Jan 30 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
详解VUE 数组更新
Dec 16 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
JS随机密码生成算法
Sep 23 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 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
xml+php动态载入与分页
2006/10/09 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python Socket传输文件示例
2017/01/16 Python
分析python切片原理和方法
2017/12/19 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python3学生名片管理v2.0版
2018/11/29 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
护士自我鉴定怎么写
2014/02/07 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Python加密技术之RSA加密解密的实现
2022/04/08 Python
js前端图片加载异常兜底方案
2022/06/21 Javascript