oujood.com

jQuery La méthode .prepend() insèrer le contenu spécifié au début des éléments

La méthode .prepend() insère le contenu spécifié au début des éléments sélectionnés (toujours l'intérieur)

chercher |

Définition et Usage La méthode prepend()

jQuery cours tutorial

La méthode .prepend() insère le contenu spécifié au début des éléments sélectionnés (toujours l'intérieur).

Note : Les méthodes prepend() et .prependTo() font la même chose.
La différence est dans la syntaxe : le placement du contenu et du sélecteur et qu'avec .prependTo() vous ne pouvez pas insérer du contenu l'aide d'une fonction.


Syntaxe

$(sélecteurr).prepend(contenu)


Paramètre

Description

contenu

Obligatoire. Spécifie le contenu insérer (peut contenir des balises HTML)

Exemple : Insérer le contenu au début de chaque élément de p

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function(){
  $("button").click(function(){
   
$("p").prepend("<b>Bonjour!</b> ");
  });
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Insérer le contenu</button>
</body>
</html>

 

Insérer le contenu spécifié au début l'aide d'une fonction

Insèrer le contenu spécifié au début des éléments sélectionnés en utilisant une fonction.

Syntaxe

$(sélecteur).prepend(function(index,html))


Paramètre

Description

function(index,html)

Obligatoire. Spécifie une fonction qui retourne le contenu insérer.

  • index - facultatif. Reçoit la position d'index du sélecteur
  • html - facultatif. Reçoit le contenu HTML actuel du sélecteur

Exemple :

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
$(document).ready(function(){
  $("button").click(function(){
   
$("p").prepend(function(n){
     
return "<b>cet élément p a un index " +
n + "</b> ";
    });
  });
});
</script>
</head>
<body>
<h1>Ceci est le titre</h1>
<p>Ceci est un  paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Insérer contenu</button>
</body>
</html>

 

Arguments supplémentaires

Similaire d'autres méthodes d'ajout de contenu tels que .append(), la méthode .prepend() permet également de passer plusieurs arguments comme entrée. Les entrées supportées peuvent être des éléments DOM, objets de jQuery, chaînes HTML et|ou tableaux d'éléments DOM.

Par exemple, le code suivant insèrera deux nouveaux <div> un <div> existant comme nœuds du body :

var $newdiv1 = $('<div id="object1"/>'),
 newdiv2 = document.createElement('div'),
 existantdiv1 = document.getElementById('foo');
$('body').prepend($newdiv1, [newdiv2, existantdiv1]);



Par gerywa 25 juillet 2014

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe