jQuery - método replaceWith (contenido)

Descripción

los replaceWith( content )El método reemplaza todos los elementos coincidentes con los elementos HTML o DOM especificados. Esto devuelve el elemento JQuery que se acaba de reemplazar, que se ha eliminado del DOM.

Sintaxis

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

selector.replaceWith( content )

Parámetros

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

content - Contenido para reemplazar los elementos emparejados.

Ejemplo

A continuación se muestra un ejemplo sencillo que muestra el uso de este método. Esto reemplaza un cuadrado en el que se hizo clic por una nueva división. Compare la sintaxis conreplaceAll( selector ) método.

<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 () {
               $(this).replaceWith( ('<div class = "div"></div>') );
            });
         });
      </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;">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