3
  1. jQuery('body').append('<div id="my-div" style="background: #fff">my text</div>');
  2. jQuery('<div/>').attr('id', 'my-div').css('background', '#fff').html('my text');
  3. jQuery('<div/>', {id: 'my-div', html: 'my text', css: {background: '#fff'}});

では、最善の方法は何ですか？他に何かあるかもしれませんか？

4

4 に答える 4

6

3 番目のソリューションは最も簡潔で、読みやすく、拡張しやすく、一般的には最もクリーンであると考えられていますが、プロパティを反復処理する必要がない 2 番目のソリューションの方が少し速いかもしれません。

最初のものは、ブラウザーに HTML の解析を要求するため、処理が遅くなります (また、Jan が気づいたように、要素を DOM に追加するのはブラウザーだけであるためです)。

パフォーマンス テストは次のとおりです: http://jsperf.com/add-element

しかし、実際には、好きなようにすればよいのです。ここでは、速度の違いでさえ問題になることはめったにありません。

于 2013-02-12T08:26:50.347 に答える
0

これが私の意見です。誰かが間違っている場合は、私を修正してください。たとえば、完全な HTML 文字列を取得する場合は、最初の文字列を使用します。たとえば、さまざまなソースから要素の構成を取得している場合、たとえば MVC のモデルのように言うことができ、そこから実際に要素を構築している場合、2 番目の 3 番目の方法が便利です。2番目と3番目の方法はほぼ同じです。2番目の方法では、チェーンを使用しているだけですが、物事がより汚くなります。これは、最初の方法のように HTML を追加するよりも非常に遅くなります。3番目のメソッドは、渡されたオブジェクトのすべてのプロパティを繰り返し処理し、同じものを構築します。しかし、よりクリーンな JavaScript を使用して同じことを行いたい場合は、次のコードを使用します。 

var div = document.createElement('div');
div.innerHTML = "Your HTML Content";
div.id = "someID";
div.cssText = "Your CSS Code" // or you can use below way
var divStyle = div.style;
divStyle['background-color'] = "#CCC" // Like this
document.getElementById('parentDIV').appendChild(div);

jquery方式とnative方式の速度比較ですが、繰り返しになります
が、

オンザフライで多くのウィジェットを追加する場合、構成に基づいて HTML コンテンツを作成し、innerHTMLそれを使用すると毎回 appendChild よりも非常に高速になることをお勧めします。私はこれをテストし、観察しました。

私の提案は、実際に必要でないときはいつでもjQueryを避けてください.jQueryはこれまで強力なDOMライブラリであることに同意しますが、実際に必要のない場所に適用すると、パフォーマンスが低下します.

于 2013-02-12T08:45:18.487 に答える
0

私は使うだろう：

jQuery('<div/>').attr({'id': 'my-div',
                       'class': 'my-class'})
                .css({'background': '#fff',
                      'color':'#000'})
                .html('my text');
于 2013-02-12T08:28:07.860 に答える
0

nr.3だと思います

1.) div を変更またはアクセスする場合は、追加後にセレクターを呼び出す必要があります。

2.) メソッド呼び出しの多く、ただし jquery 定義全体

3.) 1 回のメソッド呼び出しで最速のメソッド

jQuery('body').append(yourGeneratedDiv);2.) と 3.) の解決策の後に電話するのを忘れた

于 2013-02-12T08:29:02.530 に答える