Como substituir o HTML em um div usando jQuery

Escrito por gareth downes-powell | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
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.

Nível de dificuldade:
Fácil

Outras pessoas estão lendo

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 "<head>" e "</head>". Por exemplo:

    <script type="text/javascript" src="/jquery/jquery-1.6.1.min.js"></script>

    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 "<body>" e "</body>".

    <div id="teste"> <p>Isto é um exemplo</p> </div>

  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.

    <input type="button" name="meuBotao" id="meuBotao" value="Clique aqui" />

  5. 5

    Adicione o seguinte código entre as tags "<head>" e "</head>", sob a tag "<script>" usada para incluir a biblioteca jQuery.

    <script type="text/javascript"> $(document).ready(function() { $("#meuBotao").click(function() { $('#teste').html("<p>Isto é conteúdo novo do JQuery</p>"); }); }); </script>

    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.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível