jQuery: array of elements to raw html?

Question

Let's say I have an array like this:

var content = [ $('<p>...</p>'), $('<p>...</p>') ];

I need to get the markup of the concatenated elements. So I need to convert content" into a raw string: "<p>...</p><p>...</p>".

How can this easily be done? Seems like there should already be something in the framework to do this.

Somehow maybe convert content into a document fragment and call .html() on the document fragment to get the markup?

Sentry

I'm not entirely sure what you're looking to do here. Are you looking to simply iterate over the array and build a string that is the array elements concatenated together? In that case, you are probably looking to use the $.each() function. I apologise if I have misunderstood you, but it is not entirely clear what you mean to me. – Endarch

Answer 1

Nothing automatic, but you could easily do what you just described.

Try it out: http://jsfiddle.net/Y5x5z/

var content = [ $('<p>...</p>'), $('<p>...</p>') ];

var container = $('<div/>');

$.each(content, function(i,val) {
    container.append(val);
});

alert(container.html());

• http://api.jquery.com/jquery.each/
• http://api.jquery.com/append/ ​

Manning

Try $.fn.append.apply($('<div>'), content).html() – Organdy

Answer 2

This is shorter than the other answers, works correctly, and does not use an explicit loop:

[$("<p>"), $("<p>")].map(function(el){return el.get()[0].outerHTML;})

As Crazy Train points out in the comments, this can be sugared-up as follows:

var content = [ $('<p>...</p>'), $('<p>...</p>') ];

$.fn.toString = function() {
    return this[0].outerHTML
};

alert(content.join("")); // <p>...</p><p>...</p>

Lepidopterous

.map() is just as much of a loop as $.each() is. :P Any solution will ultimately loop the Array content at some level, but here's a trick that conceals it pretty well. jsfiddle.net/Y5x5z/4 – Shamrao

If your element array is from an actual jQuery collection (say, result of $('li') selector), you'll have to do $.makeArray(content).join(''); – Wood

Answer 3

I recently encountered the same type of task and today's way of doing this is simple:

const elements = [$('<p>...</p>'), $('<p>...</p>')];
const resultString = elements.reduce(
  (HTMLString, [element]) => HTMLString.concat(element.outerHTML),
  '',
);

Notice that HTMLString's default value in reduce is ''. It's important for HTMLString to be a type of string to be able to concatenate HTML strings of elements to it.

Holt

Answer 4

This is an old post someone may stumble upon it like me... the correct way to do it would be .join() (standard JavaScript not jQuery)

var content = [ $('<p>...</p>').html(), $('<p>...</p>').html() ];

var concatenatedHTML = content.join('');

//concatenatedHTML would then be '<p>...</p><p>...</p>'

Affiant

Did you actually try running this bro? 'cause it don't work. – Lepidopterous

@g33kz0r I guess you are right - updated it. The solution is not ideal but it does now work. – Affiant