javascript - 使用按钮从 XML 中检索数据

标签 javascript html xml dom

我编写了一个代码,在单击“计算机科学”按钮时我可以从 XML 获取数据

<html>
<head>
<script src="loadxmldoc.js"></script>
 </script>
</head>
<body>
<h1 style="text-align:center">DEPARTMENT DETAILS</h1>
<button onclick="myfunction()">Computer Science</button>
</br>
<script>
function myfunction(){
xmlDoc=loadXMLDoc("faculty.xml");
var x=xmlDoc.getElementsByTagName("computer")[0];
var y=x.childNodes;
for(i=0;i<y.length;i++)
 document.write(y[i].nodeName+"&nbsp&nbsp"+y[i].childNodes[0].nodeValue+"</br>"); 
}
 </script>
  </body>
 </html>

当我单击按钮时,我确实获取了数据,但加载了一个新页面。我想要按钮下方的数据。如何做到这一点?

最佳答案

document.write 已经过时了,只有在 DOM 加载之前才有用。如果之后使用它,它会覆盖当前的 DOM,正如您所发现的。

改用 DOM 方法并准备一个容器来接收内容。

HTML:

<div id='container'></div>

JS:

var cntr = document.querySelector('#container'), html = '';
for (var i = 0; i < y.length; i++) {
    html += y[i].nodeName+"&nbsp&nbsp"+y[i].childNodes[0].nodeValue+"</br>"; 
}
cntr.innerHTML = html;

关于javascript - 使用按钮从 XML 中检索数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26734810/

相关文章:

java - JSTL 将变量设置为字符串的长度

javascript - 显示/隐藏表单区域(使用 Bootstrap )

javascript - 来自 11ty/110 中 yaml 文件的数据

使用正则表达式进行 JavaScript 验证会破坏所有 JavaScript

html - Bootstrap 设置列高和间距

java - 如何设置元素在所有设备上保持原位

javascript - 同位素和 DOM 顺序

html - 使用 <ul> 的动画部分指示器,如 twitter bootstrap

javascript - 单击汉堡包图标后无法正确打开菜单

java - 将xml和java配置与spring混合