jQuery - méthode wrap (html)

La description

le wrap( html ) La méthode encapsule chaque élément correspondant avec le contenu HTML spécifié.

Ce processus d'encapsulation est très utile pour injecter une structure supplémentaire dans un document, sans ruiner les qualités sémantiques d'origine d'un document.

Syntaxe

Voici la syntaxe simple pour utiliser cette méthode -

selector.wrap( html )

Paramètres

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

  • elem - Une chaîne de HTML qui sera créée à la volée et enroulée autour de chaque cible.

Exemple

Voici un exemple simple montrant l'utilisation de cette méthode. Cela enveloppe la case de destination avec un carré lorsqu'un carré est cliqué -

<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 () {
               var content = '<div class = "div"></div>';
               $("#destination").wrap( content );
            });
         });
      </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" id = "destination">THIS IS TEST</div>
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Cela produira le résultat suivant -

jquery-dom.htm