0Pricing
jQuery Academy · Aula

Geração Dinâmica de Conteúdo com Dados

Combine atributos de dados com jQuery para criar componentes interativos, atualizar a interface com base nos dados armazenados e criar exibições de conteúdo flexíveis.

Geração Dinâmica de Conteúdo com Dados é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

Conteúdo dinâmico com dados

Boas-vindas à lição 2! Na lição anterior, aprendemos a armazenar e recuperar dados usando atributos de dados do HTML5.

Agora, vamos avançar um pouco mais. Exploraremos como combinar esses atributos com jQuery para gerar e atualizar conteúdo dinamicamente em suas páginas web. Isso torna suas interfaces interativas e flexíveis!

Por que usar conteúdo dinâmico?

Imagine que você tenha uma lista de produtos, perfis de usuários ou artigos de notícias. Em vez de codificar tudo diretamente, você pode definir dados básicos usando atributos data-*.

  • Atualizar elementos existentes com novas informações.
  • Criar elementos completamente novos com base nos dados.
  • Controlar o comportamento da interface (como exibir ou ocultar elementos) usando dados.

Essa abordagem separa os dados do conteúdo de sua apresentação.

Atualizando elementos existentes

Vamos começar atualizando o conteúdo. Podemos ter um elemento com atributos data-* e usar jQuery para ler esses dados e preencher outras partes da página.

Isso é ótimo para exibir detalhes sobre um item selecionado ou atualizar mensagens de status.

Código: atualizar detalhes do item

Clique no botão para ver como os atributos de dados de um elemento podem atualizar o texto de outro.

<!DOCTYPE html>
<html>
<head>
  <title>Update Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id="productCard" data-product-name="CoddyKit Pro" data-product-price="29.99">
  <p>Product: <span id="displayedName">[Name Here]</span></p>
  <p>Price: <span id="displayedPrice">[Price Here]</span></p>
  <button id="showDetailsBtn">Show Details</button>
</div>

<script>
$(document).ready(function() {
  $('#showDetailsBtn').on('click', function() {
    var name = $('#productCard').data('productName');
    var price = $('#productCard').data('productPrice');
    
    $('#displayedName').text(name);
    $('#displayedPrice').text('$' + price);
  });
});
</script>

</body>
</html>

Explicação: atualizando o conteúdo

No exemplo, a div #productCard contém data-product-name e data-product-price.

  • Quando o botão é clicado, .data('productName') e .data('productPrice') recuperam esses valores.
  • Em seguida, .text() é usado para inserir esses valores nos elementos span #displayedName e #displayedPrice.

Isso mostra como ler dados de um elemento e atualizar o conteúdo de outro.

Criando novos elementos

Além de atualizar elementos, também podemos usar atributos de dados para gerar elementos HTML completamente novos. Isso é muito útil para listas, galerias ou formulários dinâmicos.

Você pode armazenar dados semelhantes a modelos ou configurações para novos elementos em atributos de dados e, depois, usar jQuery para construí-los e inseri-los no DOM.

Código: adicionar item à lista

Clique no botão abaixo para adicionar dinamicamente um novo item à lista, cujo conteúdo é obtido dos atributos de dados do botão.

<!DOCTYPE html>
<html>
<head>
  <title>Create New Element</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<ul id="myList">
  <li>Existing Item 1</li>
</ul>

<button id="addBtn" data-new-item-text="Dynamic Item" data-new-item-value="101">
  Add Dynamic Item
</button>

<script>
$(document).ready(function() {
  $('#addBtn').on('click', function() {
    var itemText = $(this).data('newItemText');
    var itemValue = $(this).data('newItemValue');
    
    var newItem = $('<li>').text(itemText + ' (ID: ' + itemValue + ')');
    $('#myList').append(newItem);
  });
});
</script>

</body>
</html>

Explicação: criando elementos

Aqui, o botão #addBtn tem data-new-item-text e data-new-item-value.

  • Ao clicar, recuperamos esses valores.
  • $('
  • ') cria um novo elemento de item de lista.
  • .text() preenche esse elemento com os dados combinados.
  • Por fim, $('#myList').append(newItem) adiciona esse novo elemento
  • à nossa lista não ordenada.

Esse é um padrão fundamental para criar listas ou grades dinâmicas!

Componentes interativos com dados

Os atributos de dados não servem apenas para texto! Eles também podem armazenar configurações para componentes interativos. Por exemplo, qual elemento alternar ou qual animação executar.

Isso desacopla sua lógica JavaScript de identificadores ou classes codificados diretamente, tornando seu código mais modular e reutilizável.

Pergunta: conteúdo dinâmico

Considere o seguinte código HTML e jQuery:

<div id="infoBox" data-status="active"></div>

$('#infoBox').data('status', 'inactive');

Qual será o novo valor do atributo data-status quando ele for recuperado usando $('#infoBox').data('status') após a execução desse código?

Recapitulação: conteúdo dinâmico com dados

Muito bem! Nesta lição, você aprendeu a aproveitar os atributos de dados para criar conteúdo web realmente dinâmico:

  • Você pode atualizar elementos existentes lendo atributos de dados e inserindo seus valores.
  • Você pode gerar novos elementos HTML dinamicamente, preenchendo-os com dados de outros elementos.
  • Essa abordagem torna sua interface mais flexível e interativa ao separar os dados da apresentação.

Agora você está pronto para criar interfaces de usuário mais adaptáveis e envolventes!

Perguntas Frequentes

A aula “Geração Dinâmica de Conteúdo com Dados” é grátis?

Sim — o texto completo de “Geração Dinâmica de Conteúdo com Dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “Geração Dinâmica de Conteúdo com Dados”?

Combine atributos de dados com jQuery para criar componentes interativos, atualizar a interface com base nos dados armazenados e criar exibições de conteúdo flexíveis. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.

Quanto tempo leva a aula “Geração Dinâmica de Conteúdo com Dados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Uso dos Atributos de Dados do HTML5
  2. Geração Dinâmica de Conteúdo com Dados
  3. Integração Básica de Modelos no Cliente
← Voltar para jQuery Academy