Comment ajouter des éléments dans le DOM avec jQuery
Vous pouvez ajouter ou insérer des éléments dans le DOM à l’aide de deux méthodes append() ou prepend() de jQuery. La méthode append() insère le contenu à la fin des éléments correspondants, tandis que la méthode prepend() insère le contenu au début des éléments correspondants.
L’exemple suivant vous montrera comment ajouter facilement de nouveaux éléments à la fin d’une liste à l’aide de la méthode append() de jQuery.
Code source :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ajouter des éléments dans le DOM</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("ul").append("<li>lorem ipsum</li>"); }); }); </script> </head> <body> <button>Ajouter un élément</button> <ul> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> </ul> </body> </html>
Résultat |
---|
|
Pareil, vous pouvez ajouter des éléments au début des éléments correspondants.
L’exemple suivant vous montrera comment ajouter un en-tête HTML au début d’un paragraphe à l’aide de la méthode prepend() de jQuery.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ajouter des éléments dans le DOM</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").prepend("<h1>Ceci est un titre</h1>"); }); }); </script> </head> <body> <p>Ceci est un paragraphe.</p> <button>Ajouter un titre</button> </body> </html>
Résultat |
---|
Ceci est un paragraphe. |