Adicionando elementos com jQuery

Usando jQuery, é fácil adicionar novos elementos/conteúdos.

Adicionando novos conteúdos HTML

Vamos aprender sobre os quatro métodos do jQuery usados para adicionar novos conteúdos:

  • append() - Inserindo conteúdo no final do elemento selecionado
  • prepend() - Inserindo conteúdo no início do elemento selecionado
  • after() - Inserindo conteúdo após o elemento selecionado
  • before() - Inserindo conteúdo antes do elemento selecionado

Método append() do jQuery

O método append() do jQuery insere conteúdo no final do elemento selecionado.

Exemplo

$("p").append("Some appended text.");

Experimente pessoalmente

Método prepend() do jQuery

O método prepend() do jQuery insere conteúdo no início do elemento selecionado.

Exemplo

$("p").prepend("Some prepended text.");

Experimente pessoalmente

Adicionando vários novos elementos usando append() e prepend()

No exemplo acima, inserimos texto/HTML apenas no início/fim do elemento selecionado.

No entanto, os métodos append() e prepend() podem aceitar uma quantidade ilimitada de novos elementos. Pode-se gerar texto/HTML usando jQuery (como no exemplo acima) ou usando código JavaScript e elementos DOM.

Neste exemplo, criamos vários novos elementos. Esses elementos podem ser criados usando text/HTML, jQuery ou JavaScript/DOM. Em seguida, usamos o método append() para adicionar esses novos elementos ao texto (também válido para prepend()):

Exemplo

function appendText()
{
var txt1="<p>Text.</p>";               // Criando um novo elemento usando HTML
var txt2=$("<p></p>").text("Text.");   // Usando jQuery para criar um novo elemento
var txt3=document.createElement("p");  // Criar novo elemento através do DOM
txt3.innerHTML="Texto.";
$("p").append(txt1,txt2,txt3);         // Adicionar novos elementos
{}

Experimente pessoalmente

Métodos after() e before() do jQuery

O método after() do jQuery insere conteúdo após o elemento selecionado.

O método before() do jQuery insere conteúdo antes do elemento selecionado.

Exemplo

$("img").after("Algum texto depois");
$("img").before("Algum texto antes");

Experimente pessoalmente

Adicionar vários novos elementos através dos métodos after() e before()

Os métodos after() e before() podem aceitar uma quantidade ilimitada de novos elementos como parâmetros. Novos elementos podem ser criados através de text/HTML, jQuery ou JavaScript/DOM.

No exemplo a seguir, criamos vários novos elementos. Esses elementos podem ser criados através de text/HTML, jQuery ou JavaScript/DOM. Em seguida, usamos o método after() para inserir esses novos elementos no texto (também válido para before()):

Exemplo

function afterText()
{
var txt1="<b>I </b>";                    // Criar novo elemento com HTML
var txt2=$("<i></i>").text("love ");     // Criar novo elemento através do jQuery
var txt3=document.createElement("big");  // Criar novo elemento através do DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Inserir novos elementos após img
{}

Experimente pessoalmente

Manual de Referência do jQuery HTML

Para obter o conteúdo completo dos métodos HTML do jQuery, acesse o seguinte manual de referência: