Question

I have a callback with a parameter items which contains an array:

[<article>..</article>,<article>...</article>,<article>..</article>]

What I needed to do is join these items so what I did was:

items = items.join('');

But when I console.log(items) I am seeing:

[object HTMLElement][object HTMLElement][object HTMLElement][object HTMLElement] 

How do I merge this array properly?

Answer 1

You have objects, of which they can’t be automatically serialised into HTML with join().

If your browser supports outerHTML, you could do…

var html = $.map(items, function(item) { return item.outerHTML; }).join("");

jsFiddle.

Otherwise, you could do…

var fauxDocFrag = $("<div />");
$.each(items, function(key, item) { fauxDocFrag.append(item); });
var html = fauxDocFrag.html();

jsFiddle.