Comment remplacer un élément html avec ajax réponse?

Comment puis-je remplacer l'élément html de l'ajax réponse? Ce que je sais, c'est de supprimer l'élément, comment puis-je remplacer cette balise supprimée avec l'ajax réponse?
Par exemple:

J'ai un code comme ceci:

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

Lorsque je clique sur un bouton de l'appel ajax est fait pour codeginter contrôleur où je recevoir les nouvelles données extraites de la base de données et rendu dans un autre point de vue qui commence à partir de l'ul et se termine à la clôture de l'ul.

En ajax succès fonction je fais ceci:

$('#products').remove();
//What to do now here to replace the removed portion with response of ajax?
Vous pouvez utiliser .append ou .html basé sur ce que vous voulez. Rappelez-vous, .remove supprime l'élément tout à fait, vous avez probablement besoin .empty nous Montrer ce qui a été renvoyé de AJAX, est-ce <li>? Si de sorte que vous pouvez simplement utiliser .html qui aussi de vider le contenu et met le nouveau contenu.
double possible de l'Utilisation de jQuery pour remplacer une balise avec un autre
Voulez-vous remplacer l'ensemble de l'UL, ou il vous suffit de remplir le contenu?
Où est le reste de ton code ajax? Selon le format de votre réponse.. si votre réponse est au format html puis tout ce que vous devez faire est d'ajouter la réponse à #products

OriginalL'auteur Hammad | 2013-10-22

  1. 17

    Vous pouvez utiliser remplaceavec (voir: http://api.jquery.com/replaceWith/)

    Comme: $('#products').replaceWith(response);

    C'est un travail, mais l'remplacé le contenu est rompu/pas bien formé. Permettez-moi de dire que le nouveau point de vue a légèrement changé HTML. Ancienne montre les résultats sous forme de grille et les plus récents dans la liste format. Pour remplaceavec fonction de la structure du nouveau et du vieux HTML doit être exactement le même?
    Essayez $('#products').replaceWith($(response)); peut-être. Si le style semble être différente, peut-être vérifier votre sélecteurs CSS. Ils doivent être la même.

    OriginalL'auteur pascalvgemert

  2. 3

    EDIT: Le remplaceavec fonction mentionné par pascalvgemert est mieux https://stackoverflow.com/a/19527642/2887034

    Créer un wrapper autour d'elle:

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

    Maintenant, vous pouvez effectuer les opérations suivantes:

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

    OriginalL'auteur Kim Hogeling

  3. 2

    En supposant que vous remplacez vos produits, si vous obtenez au format HTML à partir de votre contrôleur, puis simplement faire ce

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

    Pas besoin de supprimer < ul > tag. Vous pouvez simplement remplacer l'ancien < li >s avec de nouvelles < li >s

    OriginalL'auteur Salman

  4. 1

    Vous pouvez utiliser JQuery avant

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

    Ou tout simplement remplacer le contenu de la div avec html $('#products').html("yourhtmlreceivedfromajax");

    OriginalL'auteur sdespont

  5. 1

    Si votre div principale est à l'intérieur d'un autre récipient avec un autre id, vous pouvez le faire:

    Basé sur cette structure:

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

    Code Javascript à l'aide de jquery ajax

    $.ajax({
  url: "action.php",
  context: document.body
}).done(function(response) {
  $('#products').remove(); //you can keep this line if you think is necessary
  $('mainContainer').html(response);
});

    OriginalL'auteur Cristian Bitoi

  6. 1

    Un moyen facile est de conclure votre ul dans un récipient 

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

    en ajax réponse 

    success:function(data){
$("#container").html(data)
}

    OriginalL'auteur M Khalid Junaid

  7. 1

    .supprimer() prend l'élément complètement hors de la DOM. Si vous souhaitez simplement remplacer les trucs à l'intérieur du products élément, vous utilisez .Remplaceavec().

    Si vous êtes le retour de tous les <li> au format HTML, vous pouvez utiliser .html()

    OriginalL'auteur Andy

  8. 1

    Ce faire

    $( "ul#products" ).replaceWith( response );

    http://api.jquery.com/replaceWith/

    OriginalL'auteur zzlalani