jQuery | Agregar elementos con ejemplos

Agregar elementos en jQuery se usa para agregar el contenido en el documento . Los métodos que se utilizan para agregar el contenido se enumeran a continuación:

  • append(): Inserta contenido al final de los elementos seleccionados.
  • prepend(): Inserta contenido al principio de los elementos seleccionados.
  • after(): Inserta contenido después de los elementos seleccionados.
  • before(): Inserta contenido antes de los elementos seleccionados.

Usando el método append(): El método append() en jQuery se usa para agregar un nuevo elemento al final del elemento seleccionado.

Sintaxis:

$(selector).append("element_to_be_inserted")

Parámetro: este método acepta un solo elemento de parámetro que debe insertarse.

Valor devuelto: No devuelve nada.

Ejemplo: Este ejemplo usa el método append() para agregar un nuevo elemento.

<html>
    <head>
        <title>Append Elements</title>
    <head>
      
    <body>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
          
        <button type="button" id="add_li" name="Add">
            Add List
        </button>
          
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
          
        <!-- Script to use append method to add list -->
        <script type="text/javascript">
            $(document).ready( function() {
                $("#add_li").click( function() {
                    $("ol").append("<li></li>")
                })
            })
        </script>
    </body>
</html>

Producción:

Usando el método prepend(): El método prepend() en jQuery se usa para agregar un nuevo elemento al comienzo del elemento seleccionado.

Sintaxis:

$(selector).prepend("element_to_be_inserted")

Parámetro: este método acepta un solo parámetro que se insertará en el DOM como parámetro.

Valor devuelto: No devuelve ningún valor.

Ejemplo: Este ejemplo usa el método prepend() para agregar un nuevo párrafo.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        prepend() method
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
<head>
  
<body>
   
    <div id="container">
        <p id="p-first">The first paragraph</p>
        <p id="p-second">The second paragraph</p>
        <p id="p-third">The third paragraph</p>
    </div>
   
    <button type="button" id="add_p" name="Add Elements">
        Add Element
    </button>
      
    <!-- Script to use prepend() method to add elements-->
    <script type="text/javascript">
        $(document).ready( function() {
            $("#add_p").click( function() {
                $("#container").prepend("<p>prepended paragraph</p>")
            })
        })
    </script>
      
    Prepend
    </body>
</html>

Producción:

Uso del método after: El método after() en jQuery se usa para insertar contenido después del elemento seleccionado.

Sintaxis:

$(selector).after("element_to_be_inserted")

Parámetro: este método acepta un único parámetro que se utiliza para insertarse en el DOM como parámetro.

Valor devuelto: No devuelve nada.

Ejemplo: este ejemplo usa el método after() para agregar una palabra después de la imagen geeksforgeeks.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Add Elements using after() method
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
<head>
  
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190222001705/images1.png"
    alt="jQuery" width="100" height="140"><br><br>
      
    <button id="btn1">Insert After</button>
   
    <!-- Script to use after() method to append content -->
    <script type="text/javascript">
        $(document).ready( function() {
            $("#btn1").click(function() {
                $("img").after("<i>After</i>");
            });
        })
    </script>
</body>
  
</html>

Producción:

Usando el método before: El método before() en jQuery se usa para insertar contenido antes del elemento seleccionado.

Sintaxis:

$(selector).before("element_to_be_inserted")

Parámetro: este método acepta un único parámetro que se utiliza para insertarse en el DOM como parámetro.

Valor devuelto: No devuelve nada.

Ejemplo: Este ejemplo usa el método before para agregar un elemento antes de la imagen geeksforgeeks.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Add Element using before() method
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
<head>
  
<body>
      <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190222001705/images1.png" 
    alt="jQuery" width="100" height="140"><br><br>
      
    <button id="btn1">Insert before</button>
      
    <!-- Script to use before() method to add element -->
    <script type="text/javascript">
        $(document).ready( function() {
            $("#btn1").click(function() {
                $("img").before("<i>Before</i>");
            });
        })
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por rahulkumarmandal 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 *