從Javascript對象創建HTML標記

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;

小提琴

你不需要使用多個函數將它包裝在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渲染模板

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/