2

jqueryにhtmlを追加する方法の違いを知りたかっただけです。どちらも同じことをしますよね？

$('body').append($("<div><img src='somesource' alt='something'></div>"));

と

var div = $("<div>");
var img = $("<img>").attr({"src" : "somesource", "alt" : "something"});
div.append(img);
$('body').append(div);

従うべきベストプラクティスはどれですか?

4

7 に答える 7

2

2番目の方が良いです。あなたはしばしばこれをしている人々を見るので：

var alt = 'This is " the title containing a double quote';
$('body').append($('<div><img src="somesource" alt="' + alt + '"></div>'));

そして、なぜ何かが食べられたのか疑問に思います:-)。一方、2番目を使用する場合は、心配する必要はまったくありません。

var alt = 'This is " the title containing a double quote';
var div = $('<div>');
var img = $('<img>').attr({ src : 'somesource', alt : alt });
div.append(img);
$('body').append(div);

アップデート：

私はあなたが2番目のアプローチで心配することは何もないと言うのにあまりにも急いでいました。他の人がすでに指摘しているように、パフォーマンスについて心配する必要があります。

于 2012-07-27T10:32:07.893 に答える
2

2 番目の方法の方が見栄えがよく、エラーの可能性も低くなります。ただし、パフォーマンスに関しては、2 番目の方法の方が遅くなります。そのため、たくさんのappending.

2 つの方法を比較するJS-Perfの小さなテスト ケースを次に示します。

于 2012-07-27T10:35:36.160 に答える
1

通常、DOMスクリプトがより良いオプションだと思います（2番目のアプローチ）。文字列として準備された大量のHTMLを挿入するよりも構造化されており、問題を簡単に見つけることができます。

とはいえ、パフォーマンスの問題があります。特にループ内でDOMスクリプトを介して要素の負荷を挿入すると、大幅な速度低下が発生する可能性があり、文字列として挿入する方がはるかに高速な場合があります。

また、挿入する回数が少ないほど（どのような方法でも）、ブラウザに強制的に再描画/更新する回数が少なくなります。繰り返しますが、これらはすべてブラウザの注意を必要とするため、少ないほど良いです。

于 2012-07-27T10:33:27.073 に答える
1

When do you use DOM-based Generation vs. using strings/innerHTML/JQuery to generate DOM content?に関する私の回答も参照してください。

違いは、jQuery インスタンスを指す 2 つの変数があることです。これらは、後でコード内で eventListener を追加または操作するために必要になる場合があります。

また、DOM ベースの要素生成には、文字列を自動的にエスケープするという利点があります。これは、パラメーターを使用してユーザー入力に絶対に必要な関数を設計する場合に特に役立ちます。

したがって、ほとんどの場合、2 番目の方法が好まれます。追加プロセスをネストして、構造を明確にすることもできます (この例では、ワンライナーも明確になります)。

var div = $("<div>");
var img = $("<img>", {"src":"somesource", "alt":"something"});
$('body').append(
  div.append(
    img
  )
);
于 2012-07-27T10:34:01.737 に答える
1

オブジェクトの挿入にはテンプレート ライブラリを使用する方がよいと思います。そのようなライブラリの例は次のとおりです: http://api.jquery.com/category/plugins/templates/

これらのライブラリはパフォーマンスのために構築されており、HTML BLOB の解析の負担を軽減します。

于 2012-07-27T10:34:15.877 に答える
1

HTML コンテンツの文字列を追加すると、約 10 倍速くなります

2番目の方法を使用するよりも

ここに参照があります

于 2012-07-27T10:34:44.553 に答える
0

最初のものは非常に長い行につながる可能性があり、イベントを特定の要素にバインドする必要がある場合は、それを指す変数がすでにあるため、2番目のものをお勧めします。

于 2012-07-27T10:32:06.237 に答える