jQuery - Agregar elementos
Con jQuery, es fácil agregar nuevos elementos/contenido.
Agregar nuevo contenido HTML
Veremos cuatro métodos jQuery que se utilizan para agregar contenido nuevo:
append()
- Inserta contenido al final de los elementos seleccionadosprepend()
- Inserta contenido al principio de los elementos seleccionadosafter()
- Inserta contenido después de los elementos seleccionadosbefore()
- Inserta contenido antes de los elementos seleccionados
Método jQuery append()
El método jQuery append()
inserta contenido AL FINAL de los elementos HTML seleccionados.
Ejemplo
$("p").append("Some appended text.");
Método jQuery prepend()
El método jQuery prepend()
inserta contenido AL PRINCIPIO de los elementos HTML seleccionados.
Ejemplo
$("p").prepend("Some prepended text.");
Agregue varios elementos nuevos con append() y prepend()
En los dos ejemplos anteriores, solo hemos insertado algo de texto/HTML al principio/final de los elementos HTML seleccionados.
Sin embargo, tanto los métodos append()
como pueden tomar un número infinito de elementos nuevos como parámetros. prepend()
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, creamos varios elementos nuevos. Los elementos se crean con texto/HTML, jQuery y JavaScript/DOM. Luego agregamos los nuevos elementos al texto con el append()
método (esto también habría funcionado
prepend()
):
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.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
Métodos jQuery after() y before()
after()
El método jQuery inserta contenido DESPUÉS de los elementos HTML seleccionados.
before()
El método jQuery inserta contenido ANTES de los elementos HTML seleccionados.
Ejemplo
$("img").after("Some text after");
$("img").before("Some text before");
Agregue varios elementos nuevos con after() y before()
Además, tanto los métodos after()
como pueden tomar un número infinito de elementos nuevos como parámetros. before()
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 se crean con texto/HTML, jQuery y JavaScript/DOM. Luego insertamos los nuevos elementos en el texto con el after()
método (esto también habría funcionado
before()
):
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>
}
Ejercicios de jQuery
Referencia HTML de jQuery
Para obtener una descripción general completa de todos los métodos HTML de jQuery, vaya a nuestra Referencia de HTML/CSS de jQuery .