jQuery - método insertBefore (selector)

Descripción

los insertBefore( selector ) El método inserta todos los elementos coincidentes antes de otro conjunto de elementos especificado.

Sintaxis

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

selector.insertBefore( selector )

Parámetros

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

selector - Contenido antes del cual se insertan los elementos seleccionados.

Ejemplo

A continuación se muestra un ejemplo sencillo que muestra el uso de este método. Esto inserta el elemento de división con el ID de "fuente" antes de un elemento en el que se comienza a hacer clic.

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

Esto producirá el siguiente resultado:

jquery-dom.htm

↰ Previous page