Insérer html après

Question

Ma question est la suivante:

Quelle serait la meilleure façon d'insérer un conteneur <div>, et le suivant après le dernier inséré?

<div class="pane"> 
    <div class="inhoud"> 
     <h3>Sample heading</h3> 
     <p>Testbericht.</p> 
    </div> 
    <form id="noteform" class="frm"> 
     <input type="image" src="images/kn_verwijder.gif" alt="delete" class="delete" /> 
     <br /> 
     <input type="hidden" name="frmnoteid" id="frmnoteid" value="" /> 
    </form> 
</div> 

Ce que je sais à ce jour:

• Compter le nombre de divs déjà sur la page avec $("#foo > div").size() et la méthode .insertAfter().
• Utilisation du sélecteur et de la méthode .load() pour charger les données html à partir d'un fichier.

Le problème est que je ne sais pas si je peux utiliser ces méthodes correctement pour obtenir le résultat.

Si quelqu'un a déjà eu une expérience avec ceux-ci?

Answer 1

vous pouvez utiliser $(".divtogoafter:last").append("content to insert"); Cela utilise le pseudo-sélecteur en dernier, de sorte que la dernière div est celle à laquelle les données sont insérées après.

Answer 2

Je ne suis pas vraiment clair sur ce que vous essayez de faire, mais vous pouvez faire quelque chose comme ça ...

Au lieu d'utiliser la charge(), l'utilisation de .get $() pour charger le code html sans l'insérer, puis l'ajouter à la page en utilisant le rappel de succès. De cette façon, vous n'avez pas à vous soucier de créer un div wrapper. Juste avoir votre page html, tbnote.html, avoir le bon balisage que vous souhaitez.

function newnote() { 
    $.get("tbnote.html", function(html) { 
     if($(.pane).length > 0) { \\test there is already .pane div on page 
      $(".pane:last").after(html); 
     } else { 
      $("#someOtherDiv").append(html); \\append to another div 
     } 
    }); 
} 

after() va analyser la réponse HTML et l'injecter dans le dom, ainsi, après que l'élément sélectionné.

Avec $.get, vous pouvez également faire quelque chose de plus avancé et faire en sorte que votre modèle puisse accepter des querystrings, ou des données, et le brancher dans votre code html avant de rendre la page.