[rnd me]

the URLs and classnames you provided are a bit out of whack, i suspect local/live drift as the culprit.

nonetheless, the following code ran in chrome's inspector from: http://www.hse.gov.uk/horizons/index.htm .

function getPage(url, from, to, callBack) {
	var cached=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() { callBack(XHRt.response.querySelector(from), to);};
	XHRt.open("GET", url, true);
	XHRt.send();
	return XHRt;

}


// to use it with the callback:
$(document).ready(function() {

  getPage("/horizons/sfreports.htm", "ul.itemThumbBook", ".hse2ColumnRight", function (elm, dest) {
		var frag = document.createDocumentFragment(),
		 items = elm.getElementsByTagName("li");
		dest.innerHTML=""; //clear list

		 // grab 3 different items:
		for (var $i = 0; $i < 3; $i++) {
			frag.appendChild(items[Math.floor(Math.random() * items.length)]);
		}

		// append all 3 to UL on page:
		dest.appendChild(frag);
   });//end getPage()

});//end ready()

i didn't see a ul#tips anywhere, so i did the best i could. kinda just threw it into a container at the bottom...

but now that it's operational, you should be able to adjust the css selectors to match the actual markup in use without much fuss. remember that the paths and css selectors have to match up, and that you can't pull the live page from your test rig, you have to pull the local copy, which i observed to be on a different url path than indicated.

the gun is firing. as long as it's pointing in the right place, it will hit the target.