2

私は、他のことに取り組まなければならない同僚からいくつかのプロジェクト作業を継承しました。同じことを行うように見える多くの JQuery を見てきましたが、2 つの異なる方法で、.append()と.html()

これらの例では、ターゲット要素が空であると想定しています。

function foo(id, field) {
    $.get('/Project/Foo?id=' + id, function (data) {
        $(field).html(data);
    });
}

そして、私はこれを見ます：

function bar(id, field) {
    $.get('/Project/Bar?id=' + id, function (data) {
        $(field).append(data);
    });
}

.append()HTMLをフィールドの最後にボルトで固定し、指定されたフィールド全体を置き換えることを理解しまし.html()たが、その使用法ではパフォーマンスに違いはありません.一度呼び出されて補助情報を表示し、別の場所で呼び出されたときに非表示にする関数.

したがって、クリーンアップして適切で均一なものにするために、次のことを尋ねる必要があります。と の間にパフォーマンスの違いは .append() あり .html() ますか? どちらかを選択する正当な理由はありますか?

4

3 に答える 3

1

比較は議論の余地がありますが。それらのそれぞれは、独自の特定の目的のためです。それでも、 append() が html() よりも遅いという事実を明らかにするjsperf append vs htmlレポートがあります。

jsperf の背景を少しだけ。jsperf は、多くの JS エキスパートが Javascript のパフォーマンスを測定するためのデファクトです。

于 2013-05-07T15:13:16.427 に答える
1

.append().html()2 つの異なることを行います。1 つ目は、名前が示すようにコンテンツを追加するため、必要に応じて後でコンテンツを追加できます。の場合.html()、要素のコンテンツ全体を置き換えます。

パフォーマンスに関しても、依存します。次の 2 つの例は、append の方がわずかに高速ですが、同様のパフォーマンスを示します。

$("body").append($("<div>"));

$("body").html($("<div>"));

入力としての文字列の場合、html()同等またはより高速です。

ただし、目的が異なるため、両者を比較しても意味がありません。

于 2013-05-07T14:13:49.523 に答える
1

それはあなたが何をしたいかによります。.append()要素の最後にいくつかの html を含め、html.html()全体を送信したコンテンツに置き換えます。例えば：

使用する.append()

<div id='content'>
     <p>Some content</p>
</div>
................
$('#content').append('<p>Secondary content</p>');

結果：

<div id='content'>
     <p>Some content</p>
     <p>Secondary content</p>
</div>

使用する.html()

<div id='content'>
     <p>Some content</p>
</div>
................
$('#content').append('<p>Secondary content</p>');

結果：

<div id='content'>
     <p>Secondary content</p>
</div>

ただし、空の要素に特定のコンテンツを挿入する場合は、 を使用することをお勧めします.html()。を使うようなものdocument.getElementById('content').innerHTML = "<p>Secondary content</p>"です。Javascript 言語で既に作成されているメソッドを使用すると、より高速になる可能性があると思います。代わりに、.append()を使用するようなものdocument.getElementById('content').innerHTML = document.getElementById('content').innerHTML + "<p>Secondary content</p>"です。

詳細については、JQuery ドキュメントで検索できます。

于 2013-05-07T14:09:10.380 に答える