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); });

Enviar artigo pelo Twitter