javascript - HTML要素をajaxレスポンスに置き換える方法は?

Question

ajax応答からhtml要素を置き換えるにはどうすればよいですか? 私が知っているのは、要素を削除することです.削除されたタグをajax応答に置き換えるにはどうすればよいですか? 例えば：

次のようなコードがあります。

<ul id="products">
...............
</ul>

ボタンをクリックすると、codeginter コントローラーに対して ajax 呼び出しが行われ、データベースから取得された新しいデータを受け取り、ul から始まり ul を閉じるまでの別のビューでレンダリングされます。

ajax 成功関数では、次のようにします。

$('#products').remove();
//What to do now here to replace the removed portion with response of ajax?

score 25 · Accepted Answer

replaceWith を使用できます ( http://api.jquery.com/replaceWith/を参照) 。

お気に入り：$('#products').replaceWith(response);

score 4 · Accepted Answer

編集: pascalvgemert が言及した replaceWith 関数の方が優れています https://stackoverflow.com/a/19527642/2887034

その周りにラッパーを作成します。

<div id="wrapper">
    <ul id="products">
    ...............
    </ul>
</div>

これで、次のことができます。

$('#wrapper').html(responseData);

score 4 · Accepted Answer

製品を交換すると仮定すると、コントローラーからフォーマットされた HTML を取得している場合は、次のようにします。

success : function(response) {
$('#products').html(response);
}

< ul > タグを削除する必要はありません。古い < li > を新しい < li > に置き換えるだけです。

score 2 · Accepted Answer

前にJQueryを使用できます

$('#products').before("yourhtmlreceivedfromajax").remove();

または、divのコンテンツをhtmlに置き換えるだけです $('#products').html("yourhtmlreceivedfromajax");

8 に答える 8