15

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

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

变成这样的有效HTML标记字符串

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

解决方案 1

使用 jQuery，这很容易；但很复杂：

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

有更好的想法吗？

4

6 回答 6

21

为什么不：

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

小提琴

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

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

这是一个JSPerf，用于比较方法之间的性能差异。

于 2013-06-27T03:44:04.580 回答
8

也许比 PSL 更简洁一些？

$('<img />',object)[0].outerHTML;
于 2013-06-27T03:56:39.037 回答
5

用jquery简单

$("<div>").append($('<img />',object)).html();
于 2013-06-27T03:40:05.857 回答
2

如果你只做一个元素，那么这个解决方案就过分了，但我想我还是会发布它，因为我不知道你的项目是什么。

你考虑过 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>
于 2013-06-27T04:14:05.497 回答
1

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

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

几乎完全属于 cook.js 的范式。
你会用厨师发出的命令是：

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

如果属性详细信息按照示例中给出的方式存储
在变量中，obj则：

img(obj)

有关更多详细信息，请访问cook.relfor.co。

于 2013-06-27T04:31:32.430 回答
0

以下是如何将其设置为字符串：

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/

于 2013-06-27T04:02:30.530 回答