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

1 つの要素しか実行していない場合、このソリューションはやり過ぎですが、プロジェクトが何であるかがわからないので、とにかく投稿すると思いました。

JavaScript テンプレート エンジンについて考えたことはありますか? Swigは非常に軽量ですが、多くのオプションがあるため、最近は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 テンプレート

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 に答える