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?

just call .html() on the objects?

Brad Christie
– Brad Christie

2011-03-17 17:02:33 +00:00
Commented Mar 17, 2011 at 17:02 — Brad Christie
– Brad Christie, Commented Mar 17, 2011 at 17:02

Community · Accepted Answer · 2017-05-23 12:09:20Z

8

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/

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 17, 2011 at 17:05

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user657496 · Accepted Answer · 2011-03-17 17:04:24Z

1

Use .clone().html();, it will convert the objects to a string. Take a look: http://jsfiddle.net/9k2LS/

-edit-

Reconsidered: Indeed @Jazzerus, why use .clone()? .html() without clone() will do.

answered Mar 17, 2011 at 17:04

user657496

1 Comment

Brad Christie Over a year ago

.html() without .clone() won't technically do as .clone duplicates the current object and ancestors. .html() is only the code for the ancestors.

Adel Mourad · Accepted Answer · 2018-04-11 16:55:41Z

1

var html = $.parseHTML(yourHtmlString); //Returns an Array of HTML Objects

//some operations on html like $(html).find() ...

html  = $('<div>').append(html).html();  // Returns string (string of html)
console.log(html);

answered Apr 11, 2018 at 16:55

Adel Mourad

1,57317 silver badges16 bronze badges

1 Comment

il_raffa Over a year ago

You should consider adding an explanation of the solution you're proposing.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related