jQuery - méthode wrapInner (html)

La description

le wrapInner( html ) encapsule le contenu enfant interne de chaque élément correspondant (y compris les nœuds de texte) avec une structure HTML.

Voici la syntaxe simple pour utiliser cette méthode -

selector.wrapInner( html )

Paramètres

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

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

Exemple

Voici un exemple simple montrant l'utilisation de cette méthode. Cela sélectionne toutes les divisions et enveloppe une balise en gras autour du contenu d'un carré 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 = "<b></b>";
               $(this).wrapInner( 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