Los últimos tutoriales de desarrollo web
 

jQuery - Añadir elementos

❮ Anterior Siguiente Capítulo ❯

Con jQuery, es fácil añadir nuevos elementos / contenido.

Añadir nuevo contenido HTML

Vamos a ver cuatro métodos de jQuery que se utilizan para añadir nuevos contenidos:

  • append() - contenido de inserciones en el extremo de los elementos seleccionados
  • prepend() - contenido de inserciones en el comienzo de los elementos seleccionados
  • after() - Inserta el contenido después de los elementos seleccionados
  • before() - Inserta el contenido antes de que los elementos seleccionados

jQuery append() Método

El jQuery append() método inserta contenido al final de los elementos HTML seleccionados.

Ejemplo

$("p").append("Some appended text.");
Inténtalo tú mismo "

jQuery prepend() Método

El jQuery prepend() método inserta contenido al principio de los elementos HTML seleccionados.

Ejemplo

$("p").prepend("Some prepended text.");
Inténtalo tú mismo "

Añadir varios nuevos elementos con append() y prepend()

En los dos ejemplos anteriores, sólo hemos insertado un texto / HTML al principio / final de los elementos HTML seleccionados.

Sin embargo, tanto en el append() y prepend() métodos pueden tomar un número infinito de nuevos elementos como parámetros. Los nuevos elementos se pueden generar con el texto / HTML (como lo hemos hecho en los ejemplos anteriores), con jQuery, o con código JavaScript y elementos DOM.

En el siguiente ejemplo, creamos varios elementos nuevos. Los elementos se crean con el texto / HTML, jQuery y JavaScript / DOM. A continuación, añadimos los nuevos elementos al texto con el append() método (esto habría trabajado para prepend() también):

Ejemplo

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML 
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
Inténtalo tú mismo "

jQuery after() y before() Métodos

El jQuery after() método inserta contenido después de los elementos HTML seleccionados.

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

Ejemplo

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

$("img").before("Some text before");
Inténtalo tú mismo "

Añadir varios nuevos elementos con after() y before()

Además, tanto el after() y before() métodos pueden tomar un número infinito de nuevos elementos como parámetros. Los nuevos elementos se pueden generar con el texto / HTML (como lo 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 se crean con el texto / HTML, jQuery y JavaScript / DOM. A continuación insertamos los nuevos elementos en el texto con el after() método (esto habría trabajado para before() también):

Ejemplo

function afterText() {
    var txt1 = "<b>I </b>";                    // Create element with HTML 
    var txt2 = $("<i></i>").text("love ");     // Create with jQuery
    var txt3 = document.createElement("b");    // Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}
Inténtalo tú mismo "

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»

jQuery Referencia HTML

Para una visión completa de todos los métodos de jQuery HTML, por favor vaya a nuestro / CSS de referencia jQuery HTML .


❮ Anterior Siguiente Capítulo ❯