jQuery - método wrap (html)

Descripción

los wrap( html ) El método envuelve cada elemento coincidente con el contenido HTML especificado.

Este proceso de ajuste es más útil para inyectar estructura adicional en un documento, sin arruinar las cualidades semánticas originales de un documento.

Sintaxis

Aquí está la sintaxis simple para usar este método:

selector.wrap( html )

Parámetros

Aquí está la descripción de todos los parámetros utilizados por este método:

elem - Una cadena de HTML que se creará sobre la marcha y se envolverá alrededor de cada objetivo.

Ejemplo

A continuación se muestra un ejemplo simple que muestra el uso de este método. Esto envuelve el cuadrado de destino con un cuadrado cuando se hace clic en cualquier cuadrado:

<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>

Esto producirá el siguiente resultado:

jquery-dom.htm

↰ Previous page