Создание тега HTML из объекта Javascript

Ответ 1

Почему бы и нет:

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

Fiddle

Вам не нужно обертывать его в div с помощью нескольких функций и получать html, просто используйте get(0), чтобы получить элемент DOM и outerHTML, чтобы получить представление элемента html.

Если вы используете действительно старые браузеры, вы можете положиться на outerHTML

Ниже приведен пример JSPerf, чтобы сравнить разницу производительности между подходами.

Ответ 2

Возможно, немного более кратким, чем PSL?

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

Ответ 3

Простой с jquery

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

Ответ 4

Если вы делаете только один элемент, это решение является излишним, но я думал, что буду публиковать его в любом случае, поскольку я не знаю, что ваш проект.

Рассматривали ли вы механизм шаблонов JavaScript? В последнее время я играю с Swig, так как он довольно легкий, но есть много вариантов. В принципе, вы создаете шаблон, передаете объект JavaScript, и скомпилированный шаблон выполняется, возвращая строку HTML.

Пример из документации Swig

Шаблон

<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 для создания шаблона

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']
});

Выход

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

Ответ 5

Создание элементов html, основанных на объектах, содержащих значения атрибутных атрибутов, такие как

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

почти полностью попадает в парадигму cook.js.
Команда, которую вы выдали с поваром, будет:

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

Если данные атрибута хранятся как указано в вашем примере,
в переменной obj, тогда:

img(obj)

Подробнее об этом см. cook.relfor.co.

Ответ 6

Вот как вы делаете это как строку:

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: Обратите внимание, что код отвечает на точный вопрос. Конечно, небезопасно создавать HTML таким образом. Но это не то, что задал вопрос. Если безопасность была связана с OP, очевидно, что он/она будет использовать document.createElement('img') вместо строки.

РЕДАКТИРОВАНИЕ 2: Для полноты, здесь гораздо более безопасный способ создания HTML из объекта:

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/