Question

我已经制作了一个代码，其中点击计算机科学按钮我从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>

当我点击按钮时，我确实获得了数据，但是加载了一个新页面。我想在按钮下面有数据。怎么做？

Answer 1

只有在加载DOM之前，

document.write才过时且有用。如果在此之后使用它，它会覆盖当前的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;

Answer 2

考虑使用这种方法。

基本上加载你的xml数据，并在div“result”中显示结果;

  <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;
    var result = document.getElementById('result');
    for(i=0;i<y.length;i++)
    result.innerHTML = ''; // always reset
    result.innerHTML +='y[i].nodeName+"&nbsp&nbsp"+y[i].childNodes[0].nodeValue+"</br>"';
     //document.write(y[i].nodeName+"&nbsp&nbsp"+y[i].childNodes[0].nodeValue+"</br>"); 
    }
     </script>
     <div id="result"></div>
      </body>
     </html>

使用按钮从XML检索数据

2 个答案: