jQuery | insertBefore() con ejemplos

El insertBefore() es un método incorporado en jQuery que se utiliza para insertar algún contenido HTML antes de un elemento específico. El contenido HTML se insertará antes de cada aparición del elemento especificado.
Sintaxis:

$(content).insertBefore(target)

Aquí el contenido es el contenido HTML que debe insertarse antes del objetivo especificado.
Parámetros: Acepta un parámetro “target” que es el target antes del cual se va a insertar el contenido.
Tipo de retorno: No devuelve ningún valor.

Código jQuery para mostrar el funcionamiento del método insertBefore():

Código #1:

<!DOCTYPE html>
<html>
  
<head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $("div").click(function() {
                // insertBefore
                $("<p>You should follow GeeksForGeeks</p>").insertBefore("p");
            });
        });
    </script>
</head>
  
<body>
  
    <p>To learn jQuery </p>
  
    <div>Click here to complete</div>
  
</body>
  
</html>

Salida:
antes de hacer clic en el contenido div-

To learn jQuery
Click here to complete

Después de hacer clic en el contenido div-

You should follow GeeksForGeeks
To learn jQuery 
Click here to complete

Código #2:

<!DOCTYPE html>
<html>
  
<head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $("div").click(function() {
                // insertBefore
                $("<p>You should follow GeeksForGeeks</p>").insertBefore("p");
            });
        });
    </script>
</head>
  
<body>
  
    <p>To learn jQuery </p>
  
    <p> To learn coding </p>
  
    <div>Click here to complete</div>
  
</body>
  
</html>

Salida:
antes de hacer clic en el contenido div-

To learn jQuery 
To learn coding 
Click here to complete

Después de hacer clic en el contenido div-

You should follow GeeksForGeeks
To learn jQuery 
You should follow GeeksForGeeks
To learn coding
Click here to complete

Publicación traducida automáticamente

Artículo escrito por ShivamKD y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *