Aprenda a criar um elemento em jQuery
Criar um novo elemento é uma das tarefas mais básicas que você pode realizar com a biblioteca jQuery JavaScript. Usando jQuery, a tarefa é muito mais simples do que a abordagem equivalente com o Document Object Model (DOM). Você também achará mais flexível e expressivo quanto mais usar o jQuery.
Para servir a um propósito, você precisará ser capaz de adicionar seu elemento a uma página da web. Aprenda como adicionar um novo item de lista ou substituir um parágrafo por um novo conteúdo usando jQuery.
O que é jQuery?
A biblioteca jQuery é uma coleção de código JavaScript com dois objetivos principais:
- Ele simplifica as operações comuns de JavaScript.
- Ele lida com problemas de compatibilidade cruzada de JavaScript entre vários navegadores.
O segundo objetivo atende a bugs, mas também aborda as diferenças de implementação entre os navegadores. Ambos os objetivos são menos necessários do que costumavam ser, à medida que os navegadores melhoram com o tempo. Mas o jQuery ainda pode ser uma ferramenta valiosa.
O que é um elemento?
Um elemento às vezes é chamado de tag. Embora os dois sejam freqüentemente usados alternadamente, há uma diferença sutil. Uma tag refere-se ao literal <p> ou </p> que você inclui em um arquivo HTML para marcar o conteúdo do texto. Um elemento é o objeto de bastidores que representa o texto marcado. Pense em um elemento como a contraparte DOM das tags HTML.
Como criar um novo elemento usando jQuery
Como a maioria das operações jQuery, a criação de um elemento começa com a função dólar, $ () . Este é um atalho para a função jQuery () principal . Esta função tem três finalidades distintas:
- Corresponde a elementos, geralmente aqueles que já existem no documento
- Cria novos elementos
- Executa uma função de retorno de chamada quando o DOM está pronto
Quando você passa uma string contendo HTML como o primeiro parâmetro, esta função cria um novo elemento:
$("<a>")Isso retorna um objeto jQuery especial que contém uma coleção de elementos. Nesse caso, há um único objeto que representa um elemento "a" que acabamos de criar.
A string deve ser semelhante a HTML para distinguir esta ação dos elementos correspondentes. Na prática, isso significa que a string deve começar com < . Você não pode adicionar texto simples ao documento usando este método.
É importante entender que isso não adiciona o elemento ao seu documento, apenas cria um novo elemento pronto para você adicionar. O elemento é 'desvinculado', ocupando memória, mas não é realmente parte da página final – ainda.
Adicionando HTML mais complexo
A função de dólar pode realmente criar mais de um elemento. Na verdade, ele pode construir qualquer árvore de elementos HTML que você desejar:
$("<ul><li>one</li><li>two</li><li>three</li></ul>")Você também pode usar este formato para criar um elemento com atributos:
$('<img src="photo.jpg" alt="my hometown" />')Como definir atributos em um novo elemento
Você pode criar um novo elemento jQuery e definir seus atributos sem ter que construir você mesmo a string HTML completa. Isso é útil se você estiver gerando valores de atributos dinamicamente. Por exemplo:
photo = new Date().getHours() > 12 ? "afternoon.jpg" : "morning.jpg";
$("<img>", { src: photo });Como adicionar um elemento
Depois de criar um novo elemento, você pode adicioná-lo ao documento de várias maneiras diferentes. A documentação do jQuery reúne esses métodos na categoria 'manipulação' .
Adicionar como filho de um elemento existente
$("body").append($("<p>Hello, world</p>"));
$(document.body).append($el);Você pode usar este método, por exemplo, para adicionar um novo item de lista no final de uma lista.
Adicione-o como irmão de um elemento existente
$("p.last").after("<p>A new paragraph</p>")
$("ul li:first").before("<li>new item</li>")Esta é uma boa escolha se, por exemplo, você deseja adicionar um novo parágrafo no meio de dois outros.
Substitua um Elemento Existente
Você pode trocar um elemento existente por um recém-criado usando o método replaceWith () :
$('#old').replaceWith("<p>New paragraph</p>");Envolva um Elemento Existente
Este é um caso de uso bastante raro, mas você pode querer incluir um elemento existente em um novo. Por exemplo, você pode ter um elemento de código que deseja envolver em um pré :
$('code#n1').wrap("<pre>")Acessando o elemento que você criou
A função $ () retorna um objeto jQuery. Isso é útil para operações de acompanhamento:
$el = $("p");
$('body').append($el);Observe que, por convenção, os programadores de jQuery costumam nomear variáveis jQuery com um cifrão à esquerda. Este é simplesmente um esquema de nomenclatura e não está diretamente relacionado à função $ () .
Criação de elementos usando jQuery
Embora você possa manipular o DOM usando funções nativas do JavaScript, o jQuery torna isso muito mais fácil. Ainda é muito útil ter um bom entendimento do DOM, mas o jQuery torna o trabalho com ele muito mais agradável.
