how do I dynamically create an object tag with jquery and add alternate content to it?

Question

I am trying to embed a pdf into my webpage using an object that will fallback to an iframe which loads the pdf through an external rendering service for users that do not have acrobat installed.

I am trying to do it like this:

var container = document.createElement("div");
var object = document.createElement("object");
var iframe = document.createElement("iframe");

$(container).append(object);
$(object).append(iframe);
$("body").append(container);

This works in firefox but causes an error in IE in the jquery core code. It breaks when I append the iframe to the object.

I need to create the content in a way that will give me access to both the object and the iframe element because I do not have a reliable way to detect if the user has acrobat or not, so I am depending on the browser to display the correct content and just styling both the iframe and the object so that either one will look okay.

What is an alternate and cross-browser approach?

Answer 1

have you tried it like this?

var object = $("<object>");
var container = $("<div>").append(object);
$(object).append("<iframe>");
$("body").append(container);