Cuando recuperamos un elemento a través de los selectores puede ser por varios motivos: Añadir un evento, modificar el estilo, enlazar algún efecto e incluso alterar de alguna manera el contenido del mismo.
Centrándome esta vez en la manipulación de elementos, voy a dedicar este post a una serie de funciones que nos ayudarán con nuestro cometido =)
- html: Recupera el contenido HTML de un elemento.
$("#btnHTML").click(function(e) {
alert($("#parrafoConHTML").html());
});El resultado podría ser algo parecido a esto:
Del mismo modo, podemos reemplazar el contenido de uno o varios elementos, con el código HTML deseado como parámetro.
$("#btnAddHtml").click(function(e) {
$("#parrafoConHTML").html("codigo <b>HTML</b>");
}); - text: Es similiar a html() pero en este caso está obviando las etiquetas HTML.
$("#btnText").click(function(e) {
alert($("#parrafoConHTML").text());
})Si utilizamos el mismo caso que en el ejemplo anterior, comprobamos que no se muestra en el alert ninguna de las etiquetas introducidas en el párrafo:
Nota: text() no puede usarse con elementos de tipo input. Para ellos, es necesario utilizar el atributo val().
Si modificamos el contenido del elemento con text, y a su vez intentamos introducir etiquetas HTML, no las interpretará como tal.$("#btnAddText").click(function(e) {
$("#parrafoConHTML").text("codigo <b>HTML</b>");
})Aunque la estructura es bastante parecida, con text() conseguiríamos lo siguiente:
- append: Se utiliza para hacer un añadido al código HTML existente en los elementos seleccionados.
$("#btnAppend").click(function(e){
$("#spanParaAppend").append("<font color='yellow'>Codigo añadido a traves de <b>append()</b></font>");
}) - appendTo: Elegimos un elemento y seleccionamos a otro al cual queremos añadirlo.
$("#btnAddAppend").click(function(e){
$("label").appendTo("#spanParaAppend");
})El resultado sería el mismo que con append()
- prepend: Realiza la misma acción que append pero posicionando los elementos elegidos por delante del elemento destino.
$("#btnPrepend").click(function(e){
$("#spanParaPrepend")
.prepend("<font color='blue'>Codigo añadido a traves de <b>prepend().</b></font>");
}) - prependTo: Pone el elemento seleccionado delante del elemento(s) indicados en segundo lugar.
$("#btnAddPrepend").click(function(e){
$("#lblPretend").prependTo("#spanParaPrepend");
}) - after: Permite insertar código HTML al final del existente.
$("#btnAfter").click(function(e){
$("#spanAfter").after("<font color='pink'> con funciones como <u>after</u></font>");
}) - insertAfter: inserta elementos después de aquel tomado como referencia.
$("#btnInsertAfter").click(function(e){
$("#lblInsertAfter").insertAfter("#spanAfter");
})En este caso, es importante señalar que se indica en primer lugar lo que queremos insertar y en segundo lugar a qué.
- before: Coloca código HTML antes del existente.
$("#btnBefore").click(function(e){
$("#spanBefore").before("<font color='green'> Insertado con <u>before()</u>.</font>");
}) - insertBefore: Posiciona elementos antes del indicado.
$("#btnInsertBefore").click(function(e){
$("#lblInsertBefore").insertBefore("#spanBefore");
}) - wrap: El significado de wrap en español es envolver. Por ello, lo que conseguimos es «envolver» precisamente con el código HTML introducido a uno o varios elementos. También es posible pasarle como parámetro un elemento.
$("#btnWrap").click(function(){
$("#parrafoA").wrap("<a href='#'></a>");
}); - wrapAll: En el caso anterior, por cada elemento que encontraba, utilizaba un «envoltorio» por cada uno de ellos. En este caso envuelve todos ellos bajo un código HTML o un elemento pasado por parámetro.
$("#btnWrapAll").click(function(){
$("li").wrapAll("<div style='border:solid 1px black';></div>");
}); - wrapInner: Localiza el hijo de los elementos seleccionados y aplica el envoltorio sobre ellos, no sobre el padre.
$("#btnWrapInner").click(function(){
$("li").wrapInner("<div style='border:solid 1px black';></div>");
}); - replaceWith: reemplaza los tags HTML de los elementos por los indicados en la llamada.
$("#btnReplaceWith").click(function(){
$("input").replaceWith("<input type='radio'></input>");
});En este caso, reemplaza todos los input que encuentre por uno de tipo radiobutton.
- replaceAll: Localiza todos los elementos en primera instancia. Esta función realiza la misma acción que replaceWith con los parámetros a la inversa.
$("#btnReplaceAll").click(function(){
$("<input type='radio'></input>").replaceAll("input");
}); - clone: Como su propio nombre indica, se utiliza para duplicar elementos.
$("#btnClone").click(function(){
$(this).clone().insertAfter(this);
});Si le pasamos como parámetro true, clonará además sus eventos asociados.
- empty: Vacía el contenido de los elementos.
$("#btnEmpty").click(function(){
$("#parrafoA").empty();
}); - remove: Elimina todo el elemento(s) seleccionado.
$("#btnEmpty").click(function(){
$("#parrafoA").remove();
});
¡Saludos!
Fabuloso !!! salu2&grz
Muchas gracias por tu comentario preguntoncojonero =)
¡Saludos!