Vimos recentemente como manipular um documento HTML usando jQuery. Quem já ouviu falar do poder do jQuery deve ter ficado ligeiramente desapontado por ter imaginado que fosse possível manipular o HTML de forma mais avançada. E teria toda razão, pois isto é possível.

Vejamos como

Inserção interna

• append(conteúdo):jQuery. Adiciona conteúdo aos elementos selecionados. Exemplo:
  $("p").append("<br >Fim do parágrafo");
• appendTo(seletor):jQuery. Adiciona todo o conteúdo dos elementos selecionados a outro conjunto de elementos. Exemplo:
  $("div").appendTo("#base");
• prepend(conteúdo):jQuery. O mesmo que append, mas adiciona o conteúdo no início dos elementos selecionados.
• prependTo(selector):jQuery. O mesmo que prependTo, mas adiciona o conteúdo no início dos elementos selecionados.

Inserção externa

• after(conteúdo):jQuery. Insere conteúdo após cada um dos elementos selecionados. Exemplo:
  $("p:odd").after("<p>Entendeu?</p>");
• before(conteúdo):jQuery. Inverso de after.
• insertAfter(seletor):jQuery. Insere todo o conteúdo dos elementos selecionados a outro conjunto de elementos. Exemplo:
  $("div").insertAfter("#base");
• insertBefore(seletor):jQuery. Inverso de insertAfter.

Inserção envolvente

• wrap(html):jQuery. Envolve cada elemento selecionado com conteúdo HTML especificado. Exemplo:
  $("p").wrap("<div></div>");
• wrap(elemento):jQuery. Envolve cada elemento selecionado com elemento especificado. Exemplo:
  $("p").wrap(document.createElement("div"));
• wrapAll(html):jQuery. Envolve o conjunto de elementos selecionados com um único conteúdo HTML especificado. Exemplo:
  $("input").wrapAll("<fieldset></fieldset>");
• wrapAll(elemento):jQuery. Envolve o conjunto de elementos selecionados com elemento especificado. Exemplo:
  $("input").wrap(document.createElement("fieldset"));
• wrapInner(html):jQuery. Envolve o conteúdo de cada elemento selecionado com um conteúdo HTML especificado. Veja o exemplo da documentação do jQuery.
• wrapInner(elemento):jQuery. Envolve o conteúdo de cada elemento selecionado com um elemento especificado. Veja o exemplo da documentação do jQuery.

Substituição

• replaceWith(conteúdo):jQuery. Substitui os elementos selecionados com o conteúdo HTML especificado. Exemplo:
  $("button").click(function(){ $(this).replaceWith("<div>" + $(this).text() + "</div>"); });
• replaceAll(seletor):jQuery. Substitui os elementos selecionados por outros elementos. Exemplo:
  $("<em>Texto. </em>").replaceAll("p");

Remoção

• empty():jQuery. Remove todo o conteúdo dos elementos selecionados. Exemplo:
  $("td").empty();
• remove([expressão]):jQuery. Na prática é utilizada de forma equivalente ao empty.

Cópia

• clone():jQuery. Produz em clone dos elementos selecionados e seleciona os clones. Exemplo:
  $("strong").clone().prependTo("p");
• clone(booleano):jQuery. Equivalente ao clone() anterior, mas tem a capacidade de clonar os eventos associados aos elementos clonados. Exemplo:
  $("button").click(function(){ $(this).clone(true).insertAfter(this); });