JQuery, uma biblioteca de JavaScript, torna inúmeras tarefas de programação da web extremamente fáceis de cumprir. Tarefas que normalmente levariam várias linhas de código a serem alcançadas, como manuseio de eventos, animações ou Ajax, podem ser feitas em apenas uma linha de código. Além dessas tarefas, adicionar elementos HTML com grande facilidade é possível usando vários métodos fornecidos no jQuery.

Este guia ensinará como adicionar elementos HTML através do jQuery usando vários métodos com a ajuda de exemplos apropriados.

Como adicionar elementos HTML através do jQuery

O jQuery fornece os quatro métodos a seguir para adicionar elementos HTML.

1. acrescentar()
2. Apresença ()
3. antes()
4. depois()

Aqui discutimos tudo isso em detalhes.

Método apêndice ()

O método Append () adiciona um elemento quando criança dentro de um elemento especificado. É preciso um número ilimitado de novos elementos HTML na forma de parâmetros.

Este método funciona de uma maneira que os elementos HTML sejam gerados usando texto/html, jQuery ou javascript. Posteriormente, esses elementos recém -gerados são anexados como a última criança usando o método Append ().

Exemplo

Suponha que você queira anexar novos itens no final de uma lista ordenada usando o método Append (). Use o seguinte código.

Html

1. Item


2. Item


3. Item

No código acima, fizemos um botão e também criamos uma lista ordenada.

jQuery

Usando o método jQuery Append (), adicionaremos outro item à lista clicando no botão.

Saída

Havia três itens na lista, inicialmente.

Suponha que você clique no botão três vezes.

Mais três itens são adicionados à lista.

Método Aprendiz ()

Este método funciona de maneira semelhante à do método Append () com a única diferença que, em vez de anexar os elementos HTML recém -criados, ele prenderá os elementos como o primeiro filho. Também é necessário um número ilimitado de novos elementos HTML na forma de parâmetros.

Exemplo

Usaremos o mesmo exemplo que acima e veremos como o método precend () funciona.

jQuery

No snippet de código acima, estamos usando o método precend () para adicionar itens no início da lista ordenada.

Saída

Originalmente, havia três itens na lista.

Suponha que você clique no botão duas vezes.

Dois itens são adicionados no início da lista ordenada.

Método antes ()

O método anterior () leva um número ilimitado de novos elementos html na forma de parâmetros. Este método funciona de uma maneira que os elementos HTML são gerados usando texto/html, jQuery ou javascript e são adicionados antes de um elemento já existente como irmão.

Exemplo

Suponha que você queira adicionar um título antes de um parágrafo clicando em um botão. Isso pode ser feito usando o método antes ().

Html

Algum parágrafo.

No código acima, criamos

, e elementos. Agora usaremos o método antes () para adicionar um título antes do parágrafo.

jQuery

Saída

O método anterior () está funcionando corretamente

depois () método

Este método leva um número ilimitado de novos elementos HTML na forma de parâmetros. Este método funciona de maneira semelhante à do método anterior () com a única diferença é que os novos elementos HTML são adicionados como irmão, mas depois dos elementos já existentes.

Exemplo

Suponha que você queira adicionar um parágrafo após um título clicando em um botão. Isso pode ser feito usando o método After ().

Html

Cabeçalho

No código acima, criamos

, e elementos, e usando o método após () um parágrafo será adicionado após o título.

jQuery

Saída

Adicionou com sucesso um parágrafo após o título.

Conclusão

Os elementos HTML podem ser adicionados usando vários métodos fornecidos por jQuery, como Append (), Apend (), antes () e depois (). Todos esses métodos tomam um número ilimitado de novos elementos HTML na forma de parâmetros e, uma vez gerados os elementos, são adicionados às suas posições apropriadas em relação ao método usado. Todos esses métodos são discutidos em profundidade neste guia, juntamente com exemplos relevantes.