Como substituir HTML em um DIV com jQuery

O jQuery, uma biblioteca JavaScript de código aberto, é usada por um grande número de sites para adicionar interatividade ao usuário e melhorar a experiência do visitante. Isso facilita scripts complexos de interações, animações e componentes AJAX com uma quantidade mínima de código. Você pode consultar os elementos da página usando seu identificador HTML, o que permite que você faça referência ao elemento e altere o código ou as propriedades HTML. Use os eventos para responder às ações do usuário, como um clique no botão, e execute um código predefinido para responder à ação, como substituir o HTML em uma DIV.

Passo 1

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

Etapa 2

Adicione a biblioteca jQuery à página adicionando o código HTML correspondente entre as tags “” “”. Por exemplo:

Altere o caminho no atributo “src” para corresponder ao local e à versão da biblioteca baixada do site jQuery.

Etapa 3

Escreva o código a seguir para adicionar uma div HTML à página com texto de exemplo. Isso deve ser adicionado entre as tags “” “”.

Este é um exemplo

Etapa 4

Adicione um botão HTML na página usando o código abaixo, que deve ser adicionado após o exemplo do DIV. O botão não possui nenhuma ação definida atualmente, pois você adicionará o controlador de clique por meio do jQuery.

Etapa 5

Adicione o seguinte código HTML entre as tags “” “” abaixo da tag ”

Este código criará uma função que será executada automaticamente assim que a página for carregada. Em seguida, você define um controlador de clique para o botão com o ID HTML “myButton”, que executa uma função quando é clicado. A função substitui o código HTML contido no DIV pelo ID “test”.

Etapa 6

Carregue a página no seu servidor da Web e abra-a em um navegador. Clique no botão e você verá que o conteúdo do DIV muda instantaneamente à medida que o controlador de clique é executado.

Referências

 

Você pode estar interessado:

Deixe um comentário