将xml内容输出到div中

最新推荐文章于 2022-05-27 21:21:15 发布

包子源

最新推荐文章于 2022-05-27 21:21:15 发布

阅读量1.5k

点赞数 2

分类专栏： javascript 文章标签： xml javascript xmlhttprequest 实例 web前端

本文链接：https://blog.csdn.net/ziwoods/article/details/50236677

版权

javascript 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

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></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>

包子源

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
将xml内容输出到div中

note.xml文件结构:GeorgeJohnReminderDon't forget the meeting!aJohnReminderDon't forget the meeting!GeorgeJohnReminderDon't forget the meeting!利用js将xml输出到div中： .aaaa{
复制链接

扫一扫