jQuery - Ajouter des éléments
Avec jQuery, il est facile d'ajouter de nouveaux éléments/contenus.
Ajouter un nouveau contenu HTML
Nous examinerons quatre méthodes jQuery utilisées pour ajouter du nouveau contenu :
append()- Insère du contenu à la fin des éléments sélectionnésprepend()- Insère du contenu au début des éléments sélectionnésafter()- Insère du contenu après les éléments sélectionnésbefore()- Insère du contenu avant les éléments sélectionnés
Méthode jQuery append()
La méthode jQuery append()insère le contenu À LA FIN des éléments HTML sélectionnés.
Exemple
$("p").append("Some appended text.");
Méthode jQuery prepend()
La méthode jQuery prepend()insère le contenu AU DÉBUT des éléments HTML sélectionnés.
Exemple
$("p").prepend("Some prepended text.");
Ajouter plusieurs nouveaux éléments avec append() et prepend()
Dans les deux exemples ci-dessus, nous avons seulement inséré du texte/HTML au début/à la fin des éléments HTML sélectionnés.
Cependant, les méthodes append()et prepend()peuvent accepter un nombre infini de nouveaux éléments comme paramètres. Les nouveaux éléments peuvent être générés avec du texte/HTML (comme nous l'avons fait dans les exemples ci-dessus), avec jQuery, ou avec du code JavaScript et des éléments DOM.
Dans l'exemple suivant, nous créons plusieurs nouveaux éléments. Les éléments sont créés avec text/HTML, jQuery et JavaScript/DOM. Ensuite, nous ajoutons les nouveaux éléments au texte avec la append()méthode (cela aurait également fonctionné
prepend()) :
Exemple
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
Méthodes jQuery après() et avant()
La méthode jQuery after()insère le contenu APRÈS les éléments HTML sélectionnés.
La méthode jQuery before()insère le contenu AVANT les éléments HTML sélectionnés.
Exemple
$("img").after("Some text after");
$("img").before("Some text before");
Ajouter plusieurs nouveaux éléments avec after() et before()
De plus, les méthodes after()et before()peuvent accepter un nombre infini de nouveaux éléments comme paramètres. Les nouveaux éléments peuvent être générés avec du texte/HTML (comme nous l'avons fait dans l'exemple ci-dessus), avec jQuery, ou avec du code JavaScript et des éléments DOM.
Dans l'exemple suivant, nous créons plusieurs nouveaux éléments. Les éléments sont créés avec text/HTML, jQuery et JavaScript/DOM. Ensuite, nous insérons les nouveaux éléments dans le texte avec la after()méthode (cela aurait également fonctionné
before()) :
Exemple
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
Exercices jQuery
Référence HTML jQuery
Pour un aperçu complet de toutes les méthodes jQuery HTML, veuillez consulter notre Référence jQuery HTML/CSS .