since you are spitting out HTML, this is a good candidate for
my off-page content fetcher.
you would need to wrap all those spans in a container, say <div id=main>, and then you can easily inject that content into any page, and do so at a regular interval.
let's call your data page data.asp and your home page index.html (shown below, adjust as needed):
Code:
<!DOCTYPE html>
<html>
<head>
<title>my home page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload=redraw()>
<h1>my home page</h1>
<h3>Latest Updates</h3>
<div id='container'>
</div>
<script type='text/javascript'>
function redraw(){
getPage("data.asp", "#main", "#container");
}
setInterval(redraw, 1000 * 300); // repeat every 300seconds
function getPage(url, from, to) {
var cached=0 // sessionStorage[url];
if(!from){from="body";} // default to grabbing body tag
if(cached){return elm.innerHTML=cached;} // cache responses for instant re-use re-use
if(to && to.split){to=document.querySelector(to);} // a string TO turns into an element
if(!to){to=document.querySelector(from);} // default re-using the source elm as the target elm
var XHRt = new XMLHttpRequest; // new ajax
XHRt.responseType='document'; // ajax2 context and onload() event
XHRt.onload= function() { sessionStorage[url]=to.innerHTML= XHRt.response.querySelector(from).innerHTML;};
XHRt.open("GET", url, true);
XHRt.send();
return XHRt;
}
</script>
</body>
</html>
EDIT i turned off caching since this is for data, changes in red.