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 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
小程序实现按下录音松开识别语音
Nov 22 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检测文件编码的方法示例
2014/04/25 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP中的表达式简述
2016/05/29 PHP
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
查看Django和flask版本的方法
2018/05/14 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
美国旅游网站:Tours4Fun
2017/02/17 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
高中生活自我鉴定
2014/01/18 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
争先创优活动总结
2014/08/27 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2014年物业管理工作总结
2014/11/21 职场文书