jquery - Create HTML tag from Javascript object - Stack Overflow

admin管理员组

文章数量:1178553

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?

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?

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Oct 5, 2013 at 0:41 PSL 124k2121 gold badges256256 silver badges243243 bronze badges asked Jun 27, 2013 at 3:37 MarcMarc 6,77199 gold badges4949 silver badges7979 bronze badges 3

• 3 Easy but complicated? Does not sound right. If you don't like using methods why not just concatenate a string then and insert it via the .html() method? – GEMI Commented Jun 27, 2013 at 3:40
• 1 You need to write a translator or use a pre-existing library such as: json2html.com – Bassem Commented Jun 27, 2013 at 3:41
• I meant what the method does is complicated - it wraps the img tag in a div to get the html code of that div. And the element is really created, it tries to load the img.jpg in my browser even if I don't attach it to the DOM. – Marc Commented Jun 27, 2013 at 3:42

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 21

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.

Perhaps slightly more concise than PSL's?

$('<img />',object)[0].outerHTML;

Simple with jquery

$("<div>").append($('<img />',object)).html();

If you are only doing one element, then this solution is overkill, but I thought I would post it anyway as I don't know what your project is.

Have you considered a JavaScript template engine? I've been playing around with Swig lately, as it is quite lightweight, but there are many options. Basically, you create a template, pass a JavaScript object, and the compiled template is executed, returning a string of HTML.

Example from Swig Documentation

Template

<h1>{{ pagename|title }}</h1>
<ul>
{% for author in authors %}
  <li{% if loop.first%} class="first"{% endif %}>
    {{ author }}
  </li>
{% else %}
  <li>There are no authors.</li>
{% endfor %}
</ul>

JavaScript to Render Template

var template  = require('swig');
var tmpl = template.compileFile('/path/to/template.html');
tmpl.render({ // The return value of this function is your output HTML
    pagename: 'awesome people',
    authors: ['Paul', 'Jim', 'Jane']
});

Output

<h1>Awesome People</h1>
<ul>
  <li class="first">Paul</li>
  <li>Jim</li>
  <li>Jane</li>
</ul>

Making html elements based out of objects containing attribute-attribute values such as

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

almost completely falls into the paradigm of cook.js.
The command which you would issue with cook would be:

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

If the attribute details are stored as given in your example,
in a variable obj then:

img(obj)

For more details check it out at cook.relfor.co.

Here's how you make it as a string:

var img = '<img ',
    obj = { src : 'img.jpg', title: 'foo' };

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    img += prop + '=' + '"' + obj[prop] + '" ';
  }
}

img += '/>';

http://jsfiddle.net/5dx6e/

EDIT: Note that the code answers the precise question. Of course it's unsafe to create HTML this way. But that's not what the question asked. If security was OP's concern, obviously he/she would use document.createElement('img') instead of a string.

EDIT 2: For the sake of completeness, here is a much safer way of creating HTML from the object:

var img = document.createElement('img'),
    obj = { src : 'img.jpg', title: 'foo' };

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    img.setAttribute(prop, obj[prop]);
  }
}

http://jsfiddle.net/8yn6Y/

本文标签： jqueryCreate HTML tag from Javascript objectStack Overflow