How to Convert an array of jQuery Objects to an HTML String

Question

In the jQuery Infinite Carousel, it uses .clone() to do the infinite effect. This works great unless the code it's cloning has HTML5 Elements. IE7 and IE8 have trouble applying HTML5 Element-specific CSS rules to cloned or otherwise post-page-load inserted elements.

The innerShiv JavaScript plugin inserts the elements in a way that IE7 and IE8 will render just fine with the appropriate CSS.

The problem is that innerShiv takes an HTML string as a parameter, but the jQuery .clone() method returns an array of jQuery objects.

In order to use the two together, I need to convert the output from .clone() into an HTML string that innerShiv will be able to parse.

Any thoughts on how this could be done?

Answer 1

HTML:

<p class="foo"><canvas class="bar"></canvas></p>

JavaScript: ^[Ref]

// grab the object, with HTML 5 element(s).
var p = $('p');

// clone it
var c = p.clone();

// grab the inner html (wrap it so we can get the HTML)
var html = $('<div>').append(c).html();

// alert us of the contents
alert(html);

Demo:

http://jsfiddle.net/bradchristie/tDFYn/