Create HTML tag from Javascript object

Question

What is the best method to change this object

{
    src: 'img.jpg',
    title: 'foo'
}

into a valid HTML tag string like this

<img src="img.jpg" title="foo" />

Solution 1

With jQuery this is easy; but complicated:

$('<img/>').attr(obj).wrap('<div/>').parent().html();

Any better ideas?

Answer 1

Why not:

$('<img/>', obj).get(0).outerHTML;

Fiddle

You do not need to wrap it in a div using multiple functions and get the html, just use get(0) to get the DOM element and outerHTML to get the element's html representation.

Unless you are using browsers really old you can rely on outerHTML

Here is a JSPerf to compare the performance diff between the approaches.