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!