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 .