Latest web development tutorials

jQuery ajouter des éléments

Par jQuery, vous pouvez facilement ajouter de nouveaux éléments / contenu.

Ajouter un nouveau contenu HTML

Nous allons apprendre à ajouter du nouveau contenu pour quatre méthode jQuery:

  • append () - Introduire à la fin de l'élément sélectionné,
  • prepend () - Insérer au début de l'élément sélectionné
  • après () - Insérer après avoir été des éléments sélectionnés
  • avant () - Insérer les éléments sélectionnés avant

méthode jQuery append ()

méthode jQuery append () insère le contenu à la fin de l'élément sélectionné.

Exemples

. $ ( "P") append ( " ajouter du texte");

Essayez »

méthode jQuery prepend ()

méthode jQuery prepend () insère le contenu au début de l'élément sélectionné.

Exemples

. $ ( "P") prepend ( " ajouter du texte au début");

Essayez »

Ajouter plusieurs nouveaux éléments par append () et prepend () Méthode

Dans l'exemple ci-dessus, nous ne sommes qu'au début de l'élément / fin du texte d'insertion / HTML sélectionné.

méthode Cependant, append () et prepend () peut recevoir un nombre illimité de nouveaux éléments par le paramètre. Vous pouvez générer un texte / HTML (comme dans l'exemple ci-dessus) par jQuery, ou par le biais du code JavaScript et des éléments DOM.

Dans l'exemple suivant, nous créons plusieurs nouveaux éléments. Ces éléments peuvent être créés en utilisant le texte / HTML, jQuery ou JavaScript / DOM. Ensuite, nous ajoutons () de ces nouveaux éléments ajoutés au texte (pour prepend () tout aussi efficace):

Exemples

fonction appendText () { var txt1 = "<p> text </ p>."; // créer un texte en utilisant des balises HTML var . Txt2 = $ ( "<p > </ p>") texte ( « texte».); // Créer un texte en utilisant jQuery var . Txt3 = document de createElement ( "p ") ;. txt3 innerHTML = " texte."; // Créer un texte en utilisant le texte avec DOM DOM $ ( "Body") append ( txt1, txt2, txt3) ;. // Append le nouvel élément }

Essayez »

jQuery après () et avant () Méthode

méthode jQuery après () pour insérer le contenu après l'élément sélectionné.

méthode jQuery avant () avant les insertions d'éléments sélectionnés.

Exemples

$ ( "Img") après ( " après la Ajouter Text") ;. $ ( "Img ") avant ( " ajouter du texte en face");

Essayez »

En ajoutant un certain nombre de nouveaux éléments après () et avant () Méthode

après () et avant () peut recevoir un nombre illimité de nouveaux éléments par le paramètre. Vous pouvez créer de nouveaux éléments via text / HTML, jQuery ou JavaScript / DOM.

Dans l'exemple suivant, nous créons plusieurs nouveaux éléments. Ces éléments peuvent être créés en utilisant le texte / HTML, jQuery ou JavaScript / DOM. Nous avons ensuite après () de ces nouveaux éléments dans le texte (de devant () tout aussi efficace):

Exemples

fonction afterText () { var txt1 = "<b> I < / b>"; // créer des éléments en utilisant HTML var txt2 = $ ( "<i> </ i>") texte ( «amour») ;. // créer des éléments en utilisant jQuery var txt3 = document de createElement ( "grand" ) ;. // créer des éléments en utilisant le DOM txt3 innerHTML = "jQuery!"; . $ ( "img") après (txt1, txt2, txt3) ;. // ajouter du texte dans l'image }

Essayez »