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

MonitorApp

/dw/codes/w3c/dynamic-elements/monitor-app/index.html

Open in GitHub

Arquivos
monitor-app
├── index.html
└── js
    ├── components
    │   └── HostTable.js
    ├── data.js
    └── main.js
Arquivos
monitor-app
├── index.html
└── js
    ├── components
    │   └── HostTable.js
    ├── data.js
    └── main.js
/codes/w3c/dynamic-elements/monitor-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>Monitor App</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>
 
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">
        <a class="navbar-brand" href="#">Monitor App</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
 
    <div class="container">
      <h1 class="text-center m-0 p-5">Monitor App</h1>
 
      <div class="card table-hosts">
        <div class="card-header">
          <h5 class="text-center">Hosts</h5>
        </div>
        <div class="card-body"></div>
      </div>
    </div>
 
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
/codes/w3c/dynamic-elements/monitor-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>Monitor App</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>
 
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">
        <a class="navbar-brand" href="#">Monitor App</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
 
    <div class="container">
      <h1 class="text-center m-0 p-5">Monitor App</h1>
 
      <div class="card table-hosts">
        <div class="card-header">
          <h5 class="text-center">Hosts</h5>
        </div>
        <div class="card-body"></div>
      </div>
    </div>
 
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
/codes/w3c/dynamic-elements/monitor-app/js/main.js
import { hosts } from './data.js';
import { HostTable } from './components/HostTable.js';
 
const hostsCard = document.querySelector('.table-hosts .card-body');
 
hostsCard.innerHTML = HostTable(hosts);
/codes/w3c/dynamic-elements/monitor-app/js/main.js
import { hosts } from './data.js';
import { HostTable } from './components/HostTable.js';
 
const hostsCard = document.querySelector('.table-hosts .card-body');
 
hostsCard.innerHTML = HostTable(hosts);
/codes/w3c/dynamic-elements/monitor-app/js/data.js
export const hosts = [
  {
    id: 'e4cfb6bb-4431-42a9-b660-d5701b2f49cd',
    name: 'Google DNS',
    address: '8.8.8.8',
    mask: '255.255.255.0',
    version: 'v4',
  },
  {
    id: 'a2bb615a-6153-41bf-8cbe-0bfb538ce511',
    name: 'Google Search',
    address: 'www.google.com',
    mask: '255.255.255.0',
    version: 'v4',
  },
  {
    id: 'db5aecf8-aec2-4788-b59f-7e0395d5238a',
    name: 'Cloudflare DNS',
    address: '1.1.1.1',
    mask: '255.255.255.0',
    version: 'v4',
  },
];
/codes/w3c/dynamic-elements/monitor-app/js/data.js
export const hosts = [
  {
    id: 'e4cfb6bb-4431-42a9-b660-d5701b2f49cd',
    name: 'Google DNS',
    address: '8.8.8.8',
    mask: '255.255.255.0',
    version: 'v4',
  },
  {
    id: 'a2bb615a-6153-41bf-8cbe-0bfb538ce511',
    name: 'Google Search',
    address: 'www.google.com',
    mask: '255.255.255.0',
    version: 'v4',
  },
  {
    id: 'db5aecf8-aec2-4788-b59f-7e0395d5238a',
    name: 'Cloudflare DNS',
    address: '1.1.1.1',
    mask: '255.255.255.0',
    version: 'v4',
  },
];
/codes/w3c/dynamic-elements/monitor-app/js/components/HostTable.js
export function HostRow(host) {
  return `
  <tr>
    <td>${host.name}</td>
    <td>${host.address}</td>
    <td>${host.mask}</td>
  </tr>
  `;
}
 
export function HostTable(hosts) {
  return `
  <table class="table">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Endereço</th>
        <th>Máscara</th>
      </tr>
    </thead>
    <tbody>
      ${hosts.map((host) => HostRow(host)).join('')}
    </tbody>
  </table>
  `;
}
/codes/w3c/dynamic-elements/monitor-app/js/components/HostTable.js
export function HostRow(host) {
  return `
  <tr>
    <td>${host.name}</td>
    <td>${host.address}</td>
    <td>${host.mask}</td>
  </tr>
  `;
}
 
export function HostTable(hosts) {
  return `
  <table class="table">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Endereço</th>
        <th>Máscara</th>
      </tr>
    </thead>
    <tbody>
      ${hosts.map((host) => HostRow(host)).join('')}
    </tbody>
  </table>
  `;
}

Editar esta página