A biblioteca jQuery oferece uma gama poderosa de métodos para interagir com a estrutura DOM de uma página web. Essas operações permitem criar, inserir, mover e modificar elementos de forma programática e eficiente.

Principais Funcionalidades de Manipulação

• Criação de novos elementos.
• Inserção de conteúdo em posições específicas.
• Movimentação de elementos existentes no documento.
• Envolvimento (wrapping) de elementos com novas tags.
• Clonagem de estruturas completas.

Exemplo Prático: Manipulação de Atributos e Estrutura

O exemplo abaixo demonstra como processar links dinamicamente, criar uma seção de notas de rodapé e gerar citações destacadas (pull-quotes).

Estrutura HTML e CSS

<!-- Estrutura base -->
<div class="artigo">
   <p>
       <span class="destaque">Frase de impacto <span class="remover">detalhe irrelevante</span></span>
       Texto principal com uma referência <span class="nota">Esta é uma nota explicativa.</span>
       Confira mais no <a href="https://pt.wikipedia.org">Wikipedia</a>.
   </p>
   <hr>
   <div id="area-notas"></div>
</div>

<style>
.nota { font-style: italic; font-size: 0.85em; display: block; }
.citacao-lateral {
   display: block;
   position: absolute;
   width: 150px;
   right: 20px;
   background: #f0f0f0;
   border: 1px solid #ccc;
   padding: 15px;
   border-radius: 5px;
}
</style>

Lógica com jQuery

$(document).ready(function() {
   // 1. Modificação dinâmica de atributos em links externos
   $('.artigo a[href*="wikipedia.org"]').attr({
       'rel': 'nofollow',
       'title': function() {
           return 'Saiba mais sobre ' + $(this).text() + ' na Wikipedia';
       },
       'id': function(idx) {
           return 'link-externo-' + idx;
       }
   });

   // 2. Inserção de links de navegação interna
   $('<a id="inicio"></a>').prependTo('body');
   $('<a href="#inicio">Topo ↑</a>').insertAfter('.artigo p');

   // 3. Organização de notas de rodapé
   var $listaNotas = $('<ol id="referencias"></ol>').insertBefore('#area-notas');
   
   $('.nota').each(function(i) {
       var indice = i + 1;
       $(this).before('<a href="#nota-' + indice + '" id="ref-' + indice + '"><sup>[' + indice + ']</sup></a>')
              .appendTo($listaNotas)
              .append('&nbsp;(<a href="#ref-' + indice + '">voltar</a>)')
              .wrap('<li id="nota-' + indice + '"></li>');
   });

   // 4. Criação de Pull-Quotes (Citações Laterais)
   $('.destaque').each(function() {
       var $paragrafoPai = $(this).parent('p');
       $paragrafoPai.css('position', 'relative');

       $(this).clone()
              .addClass('citacao-lateral')
              .find('.remover').remove().end()
              .prependTo($paragrafoPai);
   });
});

Resumo de Métodos por Categoria

Inserção de Conteúdo

Para adicionar elementos dentro de um container:

• .append() / .appendTo(): Insere ao final do elemento pai.
• .prepend() / .prependTo(): Insere no início do elemento pai.

Posicionamento Adjacente

Para inserir elementos fora do container original, como irmãos:

• .after() / .insertAfter(): Insere imediatamente após o elemento.
• .before() / .insertBefore(): Insere imediatamente antes do elemento.

Envolvimento e Substituição

• .wrap(): Envolve cada elemento individualmente.
• .wrapAll(): Envolve todos os elementos selecionados em um único containre.
• .replaceWith(): Substitui o elemento original por um novo conteúdo.

Remoção e Limpeza

• .empty(): Remove o conteúdo interno dos elementos, mantendo-os no DOM.
• .remove(): Remove o elemento e seus dados permanentemente.
• .detach(): Remove o elemento, mas preserva seus dados e eventos para reinserção futura.