Adicionar Elemento do jQuery

Uma parte muito importante do jQuery é a manipulação do DOM.

O jQuery oferece métodos eficazes para adicionar novos elementos HTML.

Neste capítulo, explicaremos como adicionar novos elementos HTML ao DOM./de conteúdo.

Adicionar novos conteúdos HTML com jQuery

Com jQuery, podemos adicionar novos elementos HTML com facilidade.

Temos os seguintes métodos jQuery para adicionar novos conteúdos:

• append()

• prepend()

• after()

• before()

• wrap()

Vou mostrar como usar cada um desses métodos.

Método jQuery append()

jQuery append()O método insere o conteúdo especificado no final de cada elemento selecionado (como o último filho).

O exemplo a seguir adiciona conteúdo de texto a todos os parágrafos:

$("button").click(function(){
　　$("p").append("Hello world");
});

O exemplo a seguir adiciona HTML a todos os parágrafos:

$("button").click(function(){
　　$("p").append('<b>Hello world<'/'>
});

Método jQuery prepend()

jQuery prepend()O método insere o conteúdo especificado no início de cada elemento selecionado (como o primeiro filho).

O exemplo a seguir adiciona conteúdo de texto antes de todos os parágrafos:

$("button").click(function(){
　　$("p").prepend("Hello world");
});

O exemplo a seguir adiciona HTML antes de todos os parágrafos:

$("button").click(function(){
　　$("p").prepend('<b>Hello world<'/'>
});

adicionar múltiplos elementos usando append() e prepend()

No exemplo acima, usamos apenas o começo do elemento HTML selecionado/Alguns textos foram inseridos no final/ HTML.

Mas,append()eprepend()Os métodos podem aceitar uma quantidade ilimitada de novos elementos como parâmetros.

Novos elementos podem ser gerados usando elementos HTML (como no exemplo acima), elementos DOM ou objetos jQuery.

Neste exemplo, usamos elementos HTML, elementos DOM e objetos jQuery para criar vários novos elementos:

function appendText() {
　　let x = '<p>Texto de exemplo.<'/p>";　　//　Criar elemento com HTML　　
　　let y = $("<p><"/p>").text("Texto de exemplo.");　　//　Criar com jQuery
　　let z = document.createElement("p");//　Criar com DOM
　　z.innerHTML = "Texto de exemplo.";
　　$("body").append(x, y, z);　　//Adicionar novos elementos　
}

Método jQuery after()

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

O exemplo a seguir insere conteúdo após cada parágrafo:

$("button").click(function(){
　　$("p").after('<p>Hello world<'/'>
});

Método jQuery before()

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

O exemplo a seguir insere conteúdo antes de cada parágrafo:

$("button").click(function(){
　　$("p").before('<p>Hello world<'/'>
});

adicionar múltiplos elementos usando after() e before()

Da mesma forma,after()ebefore()Os métodos podem aceitar uma quantidade ilimitada de novos elementos como parâmetros.

Novos elementos podem ser gerados usando elementos HTML (como no exemplo acima), elementos DOM ou objetos jQuery.

Neste exemplo, usamos elementos HTML, elementos DOM e objetos jQuery para criar vários novos elementos:

function afterText() {
　　let x = '<p>Texto de exemplo.<'/p>";　　//　Criar elemento com HTML　　
　　let y = $("<p><"/p>").text("Texto de exemplo.");　　//　Criar com jQuery
　　let z = document.createElement("p");//　Criar com DOM
　　z.innerHTML = "Texto de exemplo.";
　$("h1").after(x, y, z);　　//　No <h1Inserir novo elemento após >
}

Método wrap() do jQuery

jQuery wrap()O método envolve a estrutura HTML especificada em torno de cada elemento selecionado.

O exemplo a seguir envolve o elemento DIV em torno de cada elemento <p> antes e depois:

$("button").click(function(){
　　$("p").wrap("<div><"/div>"
});

Referência HTML do jQuery

Para referência completa dos métodos HTML, acesse nossoHTML do jQuery / Referência CSS.