Aprenda a criar um elemento em jQuery

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 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 frequentemente 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 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 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. Neste caso, há um único objeto que representa um elemento 'a' que acabamos de criar.



como as contas do instagram são hackeadas

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:

$('
  • one
  • two
  • three
')

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

$(' 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';
$(' ', { 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 sob o Categoria de 'manipulação' .

Adicionar como filho de um elemento existente

$('body').append($('

Hello, world

'));
$(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('

A new paragraph

')
$('ul li:first').before('
  • new 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:

    $('#old').replaceWith('

    New paragraph

    ');

    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 para :

    $('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');  
    $('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 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.
      Compartilhado    Compartilhado      Tweet      O email      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       Tópicos relacionados  
       
    • Programação
      •  
    • Desenvolvimento web
      •  
    • jQuery
      •  
      Sobre o autor   Bobby Jack(58 artigos publicados)      
    Bobby é um entusiasta da tecnologia que trabalhou como desenvolvedor de software por quase duas décadas. Ele é apaixonado por jogos, trabalha como Editor de Críticas na Switch Player Magazine e está imerso em todos os aspectos da publicação online e desenvolvimento web.
    Mais de Bobby Jack
    Assine a nossa newsletter
     
    Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
    Clique aqui para se inscrever