jQuery - Adicionar Elementos
Com jQuery, é fácil adicionar novos elementos/conteúdos.
Adicionar novo conteúdo HTML
Veremos quatro métodos jQuery que são usados para adicionar novo conteúdo:
append()- Insere conteúdo no final dos elementos selecionadosprepend()- Insere conteúdo no início dos elementos selecionadosafter()- Insere conteúdo após os elementos selecionadosbefore()- Insere conteúdo antes dos elementos selecionados
Método jQuery append()
O método jQuery append()insere conteúdo NO FINAL dos elementos HTML selecionados.
Exemplo
$("p").append("Some appended text.");
Método jQuery prefix()
O método jQuery prepend()insere conteúdo NO INÍCIO dos elementos HTML selecionados.
Exemplo
$("p").prepend("Some prepended text.");
Adicionar vários novos elementos com append() e prepend()
Em ambos os exemplos acima, apenas inserimos algum texto/HTML no início/fim dos elementos HTML selecionados.
No entanto, os métodos append()e podem receber um número infinito de novos elementos como parâmetros. prepend()Os novos elementos podem ser gerados com texto/HTML (como fizemos nos exemplos acima), com jQuery ou com código JavaScript e elementos DOM.
No exemplo a seguir, criamos vários novos elementos. Os elementos são criados com texto/HTML, jQuery e JavaScript/DOM. Em seguida, anexamos os novos elementos ao texto com o append()método (isso também funcionaria
prepend()):
Exemplo
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
Métodos jQuery after() e before()
O método jQuery after()insere conteúdo APÓS os elementos HTML selecionados.
O método jQuery before()insere conteúdo ANTES dos elementos HTML selecionados.
Exemplo
$("img").after("Some text after");
$("img").before("Some text before");
Adicionar vários novos elementos com after() e before()
Além disso, os métodos after()e podem receber um número infinito de novos elementos como parâmetros. before()Os novos elementos podem ser gerados com texto/HTML (como fizemos no exemplo acima), com jQuery ou com código JavaScript e elementos DOM.
No exemplo a seguir, criamos vários novos elementos. Os elementos são criados com texto/HTML, jQuery e JavaScript/DOM. Em seguida, inserimos os novos elementos no texto com o after()método (isso também funcionaria
before()):
Exemplo
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
Exercícios de jQuery
Referência HTML jQuery
Para uma visão geral completa de todos os métodos HTML do jQuery, acesse nossa Referência HTML/CSS do jQuery .