Comment puis-je ajouter un élément DOM avec jQuery?

J'ai une fonctionnalité que j'utilise actuellement pour montrer un type div.a_ caché

Comment puis-je modifier ce code de sorte que, au lieu de disparaître dans la division cachée, je peux ajouter le nouveau div au DOM

 JQuery (function () {// Ajouter une réponse

     JQuery (". Add_answer"). Cliquez sur (function () {
       Si (count> = "4") {
         Alerte ('seulement 4 réponses autorisées');
         }autre{
       Var count = $ (this) .attr ("alt");
       Compter ++;
       $ (This) .parents ('div: first'). Find ('. A_type _' + count + ''). FadeIn ();
       $ (This) .attr ("alt", compter);
     }

     }); 

 });

D'accord, maintenant que je l'ai réglé, j'ai une autre question,

J'ai une autre fonction qui supprime les divs insérés si un bouton est cliqué. Il ne fonctionne plus maintenant que les divs supplémentaires ne sont pas chargés dans le champ sur la base de données. Comment puis-je déclencher la fonction pour en supprimer maintenant?

JQuery (function () {// Masquer la réponse

jQuery(".destroy_answer").click(function(){ $(this).parents("div:first").fadeOut(function (){ $(this).remove() }); var count = $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt"); count--; $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt", count); });

});

Que diriez-vous de l'ajouter après la dernière division.

 $('.a_type:last').insertAfter('<div class="a_type">content</div>');

modifier
Vous pouvez obtenir les informations via un appel AJAX dans somefile.php. Certains fichiers doivent alors renvoyer le contenu souhaité dans la division:

 $.get('path/to/somefile.php', function(data){ $('.a_type:last').insertAfter('<div class="a_type">' + data + '</div>'); });

Somefile.php devrait être quelque chose comme ceci:

 <?php session_start(); $sessiondata = $_SESSION['data']; echo "Whatever you type here will come inside the div bla bla $sessiondata"; ?>

modifier
D'accord, essayez ceci:

 JQuery (function () {// Ajouter une réponse

 JQuery (". Add_answer"). Cliquez sur (function () {
   Si (count> = "4") {
     Alerte ('seulement 4 réponses autorisées');
     }autre{
   Var count = $ (this) .attr ("alt");
   Compter ++;
   $ ('. A_type _' + count-1 + ''). InsertAfter (' 
        Placez le contenu ici »);
   $ (This) .attr ("alt", compter);
 }

 });

 });

Il suffit de mélanger l'AJAX si vous en avez encore besoin.

J'ai une autre fonction qui supprime les divs insérés si un bouton est cliqué. Il ne fonctionne plus maintenant que les divs supplémentaires ne sont pas chargés dans le champ sur la base de données. Comment puis-je déclencher la fonction pour en supprimer maintenant?

Vous avez trois options pour résoudre votre problème le plus récent.

Vous pouvez utiliser liveQuery , un plugin jQuery qui réapplique les gestionnaires d'événements aux éléments DOM lorsqu'ils sont ajoutés. Remarque: ce plugin ne sera efficace que si vous utilisez des fonctions d'ajout / pré-ajout de jQuery DOM natives (ajouter / préciser / après / avant / insérerAvant / insérer après, etc.).
Alternativement, vous pouvez simplement ré-appliquer les gestionnaires lorsque de nouveaux éléments sont ajoutés, manuellement … (pas la meilleure option)
Le troisième, et à mon avis, la meilleure option est d'utiliser le pouvoir génial de la délégation d'événement. Ce que vous faites, c'est joindre un gestionnaire d'événements à n'importe quel parent, par exemple si vous allez ajouter des éléments de liste dynamiquement à une liste non ordonnée, au lieu de ré-appliquer continuellement les gestionnaires d'événements à chaque élément ajouté, vous pouvez simplement attacher le gestionnaire d'événements Pour le parent et ensuite trouver la cible de l'événement:
```
 $('ul').click(function(e){ var target = e ? e.target : window.event.srcElement; if(target.nodeName.toLowerCase() === 'li') { // Do Stuff... } }) 
```