problem description: in a page, when clicking the a tag, replace a node on the original page with a node in a new html file, I can only get and replace all the contents of another html page, not a node specified in another html file. I will not jQuery, trouble you had better use js, to thank you.
problem arises: the school wants us to make a website by ourselves. I made a main page. I want to replace a tag in the main page by loading the nodes in the new HTML file, but I can"t get the nodes in the new html file. I have found a lot of tutorials on the Internet, but they are all implemented in jQuery.
related code:
index.html
<nav id="nav">
<div class="container">
<header class="container-header clearfix">
<ul>
<li><a href="-sharp"></a></li>
<li><a href="javascript：;"></a></li>
<li><a href="-sharp"></a></li>
<li><a href="-sharp"></a></li>
</ul>
</header>
<div class="container-body">
<div class="account-container">
<div class="body-title"></div>
<div class="account">
<a href="-sharp"></a>
<a href="-sharp"></a>
</div>
</div>
</div>
</div>
</nav>
menu.html
< body >
<section class="account-container">
<div class="body-title"></div>
<div>
<ul>
<li><a href="-sharp"></a></li>
<li><a href="-sharp"></a></li>
<li><a href="-sharp"></a></li>
</ul>
</div>
</section>< / body >
js Code:
window.onload=function () {
var containerHead=document.getElementsByClassName("container-header")[0];
var childA=containerHead.getElementsByTagName("li")[1].getElementsByTagName("a");
childA.onclick=ajaxFunction();
var xmlhttp;
function ajaxFunction(){/ / call the instantiated object method
createXMLHttpRequest();
//
if(xmlhttp!=null){
xmlhttp.onreadystatechange=callBack;
xmlhttp.open("GET","./menu.html",true);
xmlhttp.send();
}
} / / instantiate xmlhttp objects
function createXMLHttpRequest () {
if(window.XMLHttpRequest) {
//IE7,chrome,safari,firefox
xmlhttp=new XMLHttpRequest();
}else {
//IE6,IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}}
/ / response function
function callBack () {
if(xmlhttp.readyState==4&&xmlhttp.status==200) {/ / var rel=xmlhttp.responseText;
var containerText=xmlhttp.documentElement;/ / document.getElementsByClassName ("account-container") [0] .innerHTML = containerText;
}}
}
expectation: get a specified node of the menu.html (not all the contents of a file) and replace a node of the main page to achieve the effect of local refresh