jQuery - méthode insertBefore (sélecteur)

La description

le insertBefore( selector ) La méthode insère tous les éléments correspondants avant un autre ensemble d'éléments spécifié.

Syntaxe

Voici la syntaxe simple pour utiliser cette méthode -

selector.insertBefore( selector )

Paramètres

Voici la description de tous les paramètres utilisés par cette méthode -

  • selector - Contenu avant lequel le ou les éléments sélectionnés sont insérés.

Exemple

Voici un exemple simple montrant l'utilisation de cette méthode. Ceci insère un élément de division avec l'ID de "source" avant un élément sur lequel le clic commence.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $("#source").insertBefore(this);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
      <div class = "div" id = "source"></div>
   </body>
</html>

Cela produira le résultat suivant -

jquery-dom.htm