Como substituir o HTML em um div usando jQuery

Escrito por gareth downes-powell | Traduzido por josé fabián
Como substituir o HTML em um div usando jQuery
A biblioteca jQuery faz com que os seus sites sejam mais dinâmicos (Comstock/Comstock/Getty Images)

O jQuery é uma biblioteca JavaScript gratuita de código aberto usada por muitos sites que adicionam interatividade do usuário e melhorem a experiência do visitante. O jQuery simplifica as interações com AJAX, animações e componentes usando uma quantidade mínima de código. É possível criar referências a elementos da página usando o "ID" HTML correspondente, o que lhe permitirá localizar os elementos e alterar as propriedades ou código HTML. Use eventos para responder à ações dos usuários, tais como clicar em um botão, e execute o código pré-definido para oferecer uma resposta à ação, como por exemplo substituir o código HTML em um div.

Instruções

  1. 1

    Abra um aplicativo de desenvolvimento web, ou um editor de texto, e crie uma nova página HTML.

  2. 2

    Adicione a biblioteca jQuery à página, por meio do código relevante entre as tags HTML "" e "". Por exemplo:

    Altere a rota no atributo "src" para que coincida com a localização e a versão da biblioteca jQuery que baixada do site do jQuery.

  3. 3

    Digite o código abaixo para adicionar à página um div HTML com um texto de exemplo. O código deverá estar entre as tags HTML "" e "".

    Isto é um exemplo

  4. 4

    Adicione um botão HTML à página usando o código abaixo, o qual deverá ser adicionado embaixo do div de exemplo. O botão ainda não possuirá nenhuma função definida, e você adicionará o "handler" do clique através do JQuery.

  5. 5

    Adicione o seguinte código entre as tags "" e "", sob a tag "

    Esse código criará uma função que se executará automaticamente depois de carregar a página. Você deverá, então, definir um "handler" para o clique do botão com o identificador "meuBotao", o qual executará uma função ao ser ativado. A função substituirá o código HTML do div "teste".

  6. 6

    Faça o upload da página para o seu servidor web e abra-a em um navegador. Clique no botão e verá como os conteúdos dos div mudarão instantaneamente.