Dynamically injecting a <object> tag causes page reload

I'm trying to dynamically insert some HTML/JS/CSS on command. (holding
off this code is for page loading speed reasons). I found a neat way
of doing this, inserting a HTML5 <object> tag pointing at the html-
file which in turn references the css and js, like so:

function toggleObject() {

var object = document.getElementById('myObject');

if (!object) {
var e = document.createElement('object');
e.setAttribute('data', 'testing.html');
e.setAttribute('id', 'myObject');

// inject data into DOM
document.getElementsByTagName('body')[0].appendChild(e);

} else {

//remove data from DOM
document.getElementsByTagName('body')[0].removeChild(object);

}

}

The only problem with this is that upon inserting the tag the entire
parent page reloads, i.e. its not asynchronous. Is there a way of
preventing this or alternatively a better solution?

Thanks

--
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To post to this group, send email to javascript-information@googlegroups.com.
To unsubscribe from this group, send email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information?hl=en.