Question

更改此对象的最佳方法是什么

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

转换为有效的 HTML标记字符串，如下所示

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

解决方案1 

使用jQuery这很容易;但很复杂：

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

有更好的想法吗？

Answer 1

为什么不：

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

<强> Fiddle

你不需要使用多个函数将它包装在div中并获取html，只需使用get(0)来获取DOM元素，使用outerHTML来获取元素的html表示。

除非您使用的浏览器非常陈旧，否则您可以依赖 outerHTML

这是一个 JSPerf 来比较两种方法之间的效果差异。

Answer 2

或许比PSL更简洁一点？

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

Answer 3

简单使用jquery

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

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

输出

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

Answer 5

根据包含属性属性值的对象制作html元素，例如

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

几乎完全属于cook.js的范式你将与cook发出的命令是：

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

如果属性详细信息按照示例中的说明存储，则在变量obj中然后：

img(obj)

有关详细信息，请查看cook.relfor.co。

Answer 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/

编辑：请注意，代码回答了准确的问题。当然，以这种方式创建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/

从Javascript对象创建HTML标记

6 个答案:

Swig文档中的示例

模板

JavaScript to Render Template

输出