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 JavaScript código 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 aos 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 se refere ao literal ou

 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 o DOM contrapartida 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 o núcleo jQuery () função. 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:

$("")

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 um <. 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:

$("

1
dois
três
")

Você também pode usar este formato para criar um elemento com atributos:

$('')

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:

foto = nova data (). getHours ()> 12? "tard.jpg": "morning.jpg";
$("", {src: foto});

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 sob o Categoria de 'manipulação'.

Adicionar como filho de um elemento existente

$ ("corpo"). append ($ ("
Olá Mundo
"));
$ (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.último"). depois ("
Um novo parágrafo
")
$ ("ul li: primeiro"). before ("
novo item
")

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 substituir com() método:

$ ('# antigo'). replaceWith ("
Novo parágrafo
");

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 código elemento que você deseja envolver em um pré:

$ ('code # n1'). wrap ("
")

Acessando o elemento que você criou

o $() função retorna um objeto jQuery. Isso é útil para operações de acompanhamento:

$ el = $ ("p");
$ ('corpo'). 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 ao $() 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.

O herói oculto dos sites: Compreendendo o DOM

Está aprendendo web design e precisa saber mais sobre o Document Object Model? Aqui está o que você precisa saber sobre o DOM.

Leia a seguir

Sobre o autor