Como adicionar HTML a uma página com jQuery

jQuery pode ser utilizado para adicionar uma página HTML para. 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.

Em todo o caso, acrescentando 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 informações de voos. Você clica em um botão, e constrói os resultados de forma dinâmica, à direita na mesma página. Esses sites usam javascript, muitas vezes jQuery, para realizar esta façanha.

Mas antes de ir mudando HTML que você deve saber 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 da web se parece com esta:

image0.jpg

A página usa uma lista desordenada 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:

$ ( "# TheList"). Append ( "
  • Aqui está 3
  • ") -

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

    Esta lista mostra o código final. Note-se que jQuery foi adicionado a ele e na secção do acrescentar() função está dentro do pronto() função.

    jQuery 

    adicionando HTML

    • Aqui está 1
    • Aqui está 2

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

    image1.jpg

    menu