Inserção de elementos no DOM com jQuery

O jQuery provê diversos métodos, como append(), prepend(), html(), text(), before(), after(), wrap(), entre outros que permitem a inserção de novo conteúdo em um elemento existente. Os métodos html() e text() nós já vimos na videoaula anterior, então nesta videoaula iremos focar nos métodos restantes.

Método append()

O método append() é usado para inserir conteúdo no final de elementos selecionados.

$("p").append(' <a href="#">leia mais...</a>'); // insere o código HTML passado como argumento ao final de todos os parágrafos do documento

$("button").click(function () {
  $("#texto").append("Isso é um texto de exemplo. "); // ao clique no botão, insere o texto passado como argumento ao final do elemento de ID `texto`
});

Método prepend()

O método prepend() é usado para inserir conteúdo no início de elementos selecionados.

$("p").prepend("<strong>Nota: </strong> "); // insere o código HTML passado como argumento no início de todos os parágrafos do documento

$("button").click(function () {
  $("#texto").prepend("Isso é um texto de exemplo."); // ao clique no botão, insere o texto passado como argumento no início do elemento de ID `texto`
});

Métodos before() e after()

O método before() é usado para inserir conteúdo antes dos elementos selecionados. Já o método after() é usado para inserir conteúdo após os elementos selecionados.

$("button.inserir-before").click(function () {
  $("#principal").before("*"); // ao clique no botão, insere o texto passado como argumento antes do elemento de ID `principal`
});

$("button.inserir-after").click(function () {
  $("#principal").after("<hr>"); // ao clique no botão, insere o código HTML passado como argumento depois do elemento de ID `principal`
});

Método wrap()

O método wrap() é utilizado para utilizar estrutura HTML que envolva os elementos selecionados.

$("button.negrito").click(function () {
  $("#principal").wrap("<strong></strong>"); // ao clique no botão, envolve o elemento de ID `principal` com a *tag* <strong>
});

$("button.italico").click(function () {
  $("#principal").wrap("<em></em>"); // ao clique no botão, envolve o elemento de ID `principal` com a *tag* <em>
});