Load Div In Foreign Object Element

I am at the last stage of publishing what I think is a helpful SVG demo. The last thing I need to do is load through script a div that is in a foreign object element. I am assuming this is possible by first getting the foreign object element and then finding the display element inside it, but I don't know how to do this.
Without the foreign object the below script works well. Can anyone help rewrite this code snippet?

<script type="text/javascript">
function load_data(temp) {
var req = new XMLHttpRequest();
req.open("GET", temp, false);
req.send(null);
var page = req.responseText;
document.getElementById("display").innerHTML = page;
}
</script>

<foreignobject x="0" y="0" width="100%" height="100%">
<div id="display">
</div>
</foreignobject>
 
Help, as always is appreciated.

James