Avec jQuery, il est facile d'ajouter de nouveaux éléments / contenu.
Ajouter le nouveau contenu HTML
Nous allons examiner quatre méthodes jQuery qui sont utilisés pour ajouter du nouveau contenu:
- append() - contenu Inserts à la fin des éléments sélectionnés
- prepend() - contenu Inserts au début des éléments sélectionnés
- after() - Insère contenu après les éléments sélectionnés
- before() - contenu Inserts avant que les éléments sélectionnés
jQuery append() Méthode
Le jQuery append() méthode insère le contenu À LA FIN des éléments HTML sélectionnés.
jQuery prepend() Méthode
Le jQuery prepend() méthode insère le contenu AU DÉBUT des éléments HTML sélectionnés.
Ajouter plusieurs nouveaux éléments Avec append() et prepend()
Dans les deux exemples ci-dessus, nous avons seulement inséré un texte / HTML au début / fin des éléments HTML sélectionnés.
Cependant, le append() et prepend() méthodes peuvent prendre un nombre infini de nouveaux éléments comme paramètres. Les nouveaux éléments peuvent être générés avec le texte / HTML (comme nous l'avons fait dans les exemples ci-dessus), avec jQuery, ou avec le 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 le texte / HTML, jQuery et JavaScript / DOM. Ensuite , nous ajoutons les nouveaux éléments au texte avec la append() méthode (cela aurait travaillé pour prepend() aussi):
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.";
$("p").append(txt1, txt2, txt3);
// Append the new elements
} Essayez - le vous - même » jQuery after() et before() Méthodes
Le jQuery after() méthode insère le contenu AFTER les éléments HTML sélectionnés.
Le jQuery before() méthode insère le contenu avant que les éléments HTML sélectionnés.
Exemple
$("img").after("Some text after");
$("img").before("Some text before");
Essayez - le vous - même » Ajouter plusieurs nouveaux éléments Avec after() et before()
En outre, les deux after() et before() méthodes peuvent prendre un nombre infini de nouveaux éléments comme paramètres. Les nouveaux éléments peuvent être générés avec le texte / HTML (comme nous l'avons fait dans l'exemple ci-dessus), avec jQuery, ou avec le 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 le texte / HTML, jQuery et JavaScript / DOM. Ensuite , nous insérons les nouveaux éléments au texte avec l' after() méthode (cela aurait travaillé pour before() aussi):
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>
} Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
jQuery HTML référence
Pour un aperçu complet de toutes les méthodes jQuery HTML, s'il vous plaît visitez notre jQuery HTML / CSS Référence .