15-agregar elementos con jquery

Add Elements with jquery

Con jQuery, es fácil agregar nuevos elementos/contenido.

Para agregar contenido nuevo, usamos cuatro methodos jquery

• 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

---

Método jQuery append()

El método append() inserta contenido AL FINAL de los elementos HTML seleccionados.

$("p").append("Some appended text.");

---

...

Método jQuery prepend()

El método prepend() inserta contenido AL PRINCIPIO de los elementos HTML seleccionados.

        $("p").prepend("Some prepended text.");
    

---

Los metodos append()y prepend() pueden tomar un número infinito de nuevos elementos como parámetros.

Los nuevos elementos se pueden generar con texto/HTML (como hemos hecho en los ejemplos anteriores), con jQuery, o con Código JavaScript y elementos DOM.

En el siguiente ejemplo, vamos ver varios elementos nuevos.

los elementos son creado con texto/HTML, jQuery y JavaScript/DOM.

Luego agregamos el nuevo elementos al texto con el método append() (esto habría funcionado para también con el metodo prepend() ) :

 function appendText() {
     var txt1 = "
Text.
";               // Crea un elemeto con HTML 
     var txt2 = $("
").text("Text.");   // Creado con jquery
     var txt3 = document.createElement("p");  // Creado con DOM
     txt3.innerHTML = "Text.";
     $("body").append(txt1, txt2, txt3);      // append el nuevo elemento
   } 
        

---

Métodos jQuery after() y before()

El método after() inserta contenido DESPUÉS de los elementos HTML seleccionados.

El método before() inserta contenido ANTES de los elementos HTML seleccionados.

        $("img").after("Some text after");

        $("img").before("Some text before");
        

---

Agregue varios elementos nuevos con after() y before()

Los métodos after()y before() pueden tomar un número infinito de nuevos elementos como parámetros

Los nuevos elementos se pueden generar con texto/HTML (como hemos hecho en el ejemplo anterior), con jQuery, o con Código JavaScript y elementos DOM.

En el siguiente ejemplo, creamos varios elementos nuevos

los elementos son creado con texto/HTML, jQuery y JavaScript/DOM.

Luego insertamos el nuevo elementos al texto con el método after() (esto habría funcionado también con before() ) :

 function afterText() {
     var txt1 = "I ";                    // Crea un elemento HTML 
     var txt2 = $("").text("love ");     // Creado con jQuery
     var txt3 = document.createElement("b");    // Creado con DOM
     txt3.innerHTML = "jQuery!";
     $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
   } 
            

Ir al indice