Manipulación de elementos con JQuery

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!

2 comentarios en “Manipulación de elementos con JQuery”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *