Elementos Dinâmicos

Element

Element.innerHTML

const body = document.body;
body.innerHTML = '<h1>Lorem ipsum</h1>'

const body = document.body;
body.innerHTML = '<h1>Lorem ipsum</h1>'

MDN

Element.insertAdjacentHTML()

const body = document.body;
body.insertAdjacentHTML('afterbegin', '<h1>Lorem ipsum</h1>')

const body = document.body;
body.insertAdjacentHTML('afterbegin', '<h1>Lorem ipsum</h1>')

<!-- beforebegin -->
<body>
  <!-- afterbegin -->
  ...
  <!-- beforeend -->
</body>
<!-- afterend -->

<!-- beforebegin -->
<body>
  <!-- afterbegin -->
  ...
  <!-- beforeend -->
</body>
<!-- afterend -->

Referências:

Document

const h1 = document.createElement("h1");
const text = document.createTextNode("Lorem ipsum");
h1.appendChild(text);
 
const body = document.body;
body.appendChild(h1);

const h1 = document.createElement("h1");
const text = document.createTextNode("Lorem ipsum");
h1.appendChild(text);
 
const body = document.body;
body.appendChild(h1);

MDN

InvestApp

Arquivos

invest-app
├── index.html
└── js
    ├── components
    │   └── InvestmentCard.js
    ├── data.js
    ├── lib
    │   └── utils.js
    └── main.js

Arquivos

invest-app
├── index.html
└── js
    ├── components
    │   └── InvestmentCard.js
    ├── data.js
    ├── lib
    │   └── utils.js
    └── main.js

/codes/w3c/dynamic-elements/invest-app/index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>InvestApp</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-gray-100">
  <div class="container mx-auto lg:max-w-screen-lg">
    <h1 class="text-center text-2xl my-12 font-bold">Investimentos</h1>
    <div class="investments grid grid-cols-3 gap-3"></div>
  </div>
  <script type="module" src="./js/main.js"></script>
</body>
 
</html>

/codes/w3c/dynamic-elements/invest-app/index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>InvestApp</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-gray-100">
  <div class="container mx-auto lg:max-w-screen-lg">
    <h1 class="text-center text-2xl my-12 font-bold">Investimentos</h1>
    <div class="investments grid grid-cols-3 gap-3"></div>
  </div>
  <script type="module" src="./js/main.js"></script>
</body>
 
</html>

/codes/w3c/dynamic-elements/invest-app/js/main.js

import { investments } from './data.js';
import { InvestmentCard } from './components/InvestmentCard.js';
 
const investmentsGrid = document.querySelector('.investments');
 
investmentsGrid.innerHTML = investments
  .map((investment) => InvestmentCard(investment))
  .join('');

/codes/w3c/dynamic-elements/invest-app/js/main.js

import { investments } from './data.js';
import { InvestmentCard } from './components/InvestmentCard.js';
 
const investmentsGrid = document.querySelector('.investments');
 
investmentsGrid.innerHTML = investments
  .map((investment) => InvestmentCard(investment))
  .join('');

/codes/w3c/dynamic-elements/invest-app/js/data.js

export const investments = [
  {
    name: 'Tesouro Selic 2029',
    value: 100.5,
    origin: 'Tesouro Nacional',
    category: 'Pos',
    date: '2023-03-22',
    interest: '100% Selic',
  },
  {
    name: 'Tesouro IPCA 2029',
    value: 100,
    origin: 'Tesouro Nacional',
    category: 'IPCA',
    date: '2023-03-22',
    interest: 'IPCA + 5,83%',
  },
];

/codes/w3c/dynamic-elements/invest-app/js/data.js

export const investments = [
  {
    name: 'Tesouro Selic 2029',
    value: 100.5,
    origin: 'Tesouro Nacional',
    category: 'Pos',
    date: '2023-03-22',
    interest: '100% Selic',
  },
  {
    name: 'Tesouro IPCA 2029',
    value: 100,
    origin: 'Tesouro Nacional',
    category: 'IPCA',
    date: '2023-03-22',
    interest: 'IPCA + 5,83%',
  },
];

/codes/w3c/dynamic-elements/invest-app/js/components/InvestmentCard.js

import { formatCurrency, formatDate } from '../lib/utils.js';
 
export function InvestmentCard(investment) {
  return `
    <div
      id="investment-${investment.id}"
      class="bg-white shadow-md rounded-lg p-4"
    >
      <div class="flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-700">
          ${investment.name}
        </h3>
        <p class="text-lg font-semibold text-gray-700">
          ${formatCurrency(investment.value)}
        </p>
      </div>
      <div class="mt-4">
        <p class="text-sm text-gray-500">
          <span class="font-bold">Origem:</span>
          ${investment.origin}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Categoria:</span>
          ${investment.category}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Data:</span>
          ${formatDate(investment.created_at)}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Taxa:</span>
          ${investment.interest}
        </p>
      </div>
    </div>
  `;
}

/codes/w3c/dynamic-elements/invest-app/js/components/InvestmentCard.js

import { formatCurrency, formatDate } from '../lib/utils.js';
 
export function InvestmentCard(investment) {
  return `
    <div
      id="investment-${investment.id}"
      class="bg-white shadow-md rounded-lg p-4"
    >
      <div class="flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-700">
          ${investment.name}
        </h3>
        <p class="text-lg font-semibold text-gray-700">
          ${formatCurrency(investment.value)}
        </p>
      </div>
      <div class="mt-4">
        <p class="text-sm text-gray-500">
          <span class="font-bold">Origem:</span>
          ${investment.origin}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Categoria:</span>
          ${investment.category}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Data:</span>
          ${formatDate(investment.created_at)}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Taxa:</span>
          ${investment.interest}
        </p>
      </div>
    </div>
  `;
}

/codes/w3c/dynamic-elements/invest-app/js/lib/utils.js

export function formatCurrency(currency) {
  return currency.toLocaleString('pt-BR', {
    style: 'currency',
    currency: 'BRL',
  });
}
 
export function formatDate(date) {
  return new Date(date).toLocaleDateString('pt-BR');
}

/codes/w3c/dynamic-elements/invest-app/js/lib/utils.js

export function formatCurrency(currency) {
  return currency.toLocaleString('pt-BR', {
    style: 'currency',
    currency: 'BRL',
  });
}
 
export function formatDate(date) {
  return new Date(date).toLocaleDateString('pt-BR');
}

Editar esta página