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 相关文章推荐
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
使用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/27 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP 错误处理机制
2015/07/06 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python使用剪切板的方法
2017/06/06 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Python中的元组介绍
2019/01/28 Python
Django中间件基础用法详解
2019/07/18 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
酒店人事专员岗位职责
2013/12/19 职场文书
征婚广告词
2014/03/17 职场文书
工作检讨书大全
2015/01/26 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书