Como adicionar html para uma página com jquery

Video: Como criar botão subir para o topo - HTML - CSS - jQuery - #DPLUSHelper - 10

jQuery pode ser usado para adicionar HTML a uma página. Você pode adicionar todos os tipos de HTML, imagens, praticamente qualquer coisa, e mudar completamente o layout da página usando jQuery. Fazer isso não é realmente uma boa idéia, porque ele pode ficar muito, muito confuso para descobrir o que está vindo de onde e também pode ser mais difícil de manter no futuro, quando você precisa para mudar de página.

Video: Simples Formulário Com HTML, jQuery, Ajax e PHP

Em qualquer caso, a adição de HTML para coisas como mensagens de erro, ou para adicionar dados a uma página é bastante comum. Pense em um site de viagens que olha para cima informação de voo. Você clica em um botão, e constrói os resultados de forma dinâmica, mesmo na mesma página. Esses sites usam javascript, muitas vezes jQuery, para realizar esta façanha.

Mas antes de ir mudando em HTML que você deve aprender como adicionar HTML a uma página.

Este anúncio mostra uma página HTML simples que cria uma lista de itens.

jQuery

adicionando HTML

  • Aqui está 1
  • Aqui está 2

A página visualizada em um navegador web se parece com esta:



A página usa uma lista não ordenada com dois itens. Você pode adicionar mais um item a essa lista com o jQuery acrescentar() função. Fazer isso significa selecionar o elemento, o que você já sabe como fazer, e, em seguida, chamar a acrescentar() função. Aqui está um exemplo para adicionar um terceiro item à lista:

Video: Como criar menu fixo no topo do Site - HTML -CSS- jQuery - #DPLUSHelper - 11

$ ("#a lista").acrescentar("
  • Aqui está 3
  • ") -

    Como você pode ver, você seleciona o elemento usando um seletor de ID e depois chamar o acrescentar() função com o HTML para adicionar. Não fica muito mais simples do que isso.

    Este anúncio mostra o código final. Note-se que jQuery foi adicionado a ele no seção e na acrescentar() função está dentro do pronto() função.

    jQuery

    adicionando HTML

    • Aqui está 1
    • Aqui está 2

    Video: Botão Voltar ao Topo com HTML, CSS e jQuery

    Quando visto em um navegador, o resultado se parece com isso:


    Publicações relacionadas