0

Estou com dificuldades em criar elementos de forma dinâmica. Eu apenas inicio o código e não acontece nada no DOM. Existe um HTML Collection dentro do parentObject que seria iterado 8 vezes dentro do forEach, criando 8 parágrafos simples escrito "second {numero da iteração]"

mas rodo ele e não acontece absolutamente nada.

O código é:

<html lang="pt-br">

<head>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
    const parentObject = document.getElementsByClassName("card-body");


    [...parentObject].forEach((parent, i) => {
      const childElement = document.createElement("p");
      childElement.className = "card-text";
      childElement.innerText = `second ${i}`;
      parent.appendChild(childElement);
      console.log(i)
    });
  </script>
</head>

<body>

  <div class="card-body">
    <p class="card-text name">Nome do produto</p>
    <p class="card-text description">Descrição do produto Descrição do produto Descrição do produto Descrição do produto Descrição do produto</p>
    <p class="card-text oldPrice">preço anterior</p>
    <p class="card-text price">Preço agora</p>
    <p class="card-text parcel">parcela</p>

    <div class="d-flex justify-content-between align-items-center">
      <div class="btn-group">
        <button type="button" class="btn btn-block">Comprar</button>
      </div>
    </div>
  </div>
</body>

2
  • Oi juliano, podes mostrar o teu HTML todo (pelo menos a parte relativa à pergunta) ou criar um exemplo aqui que reproduza o problema? Não vejo nada errado no teu código.
    – Sergio
    11/08/2019 às 5:58
  • projeto é esse. github.com/Jhenri-json/teste-linx-impulse eu realmente não consegui entender porque não criou novos elementos... Pois a ideia era depois usar um arquivo json para criar os elementos com os objetos do json. 11/08/2019 às 12:21

1 Resposta 1

0

O teu código está correto mas está a correr cedo demais. Tens de colocar o código no final do HTML para quando ele correr o HTML já ter sido lido.

Outra alternativa é uma função parecida com a .ready() do jQuery. No fundo uma callback que corra quando o browser tiver carregado e lido o HTML.

Um exemplo simples, colocando o JavaScript depois do HTML, pode ser:

<html lang="pt-br">

<head>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

  <div class="card-body">
    <p class="card-text name">Nome do produto</p>
    <p class="card-text description">Descrição do produto Descrição do produto Descrição do produto Descrição do produto Descrição do produto</p>
    <p class="card-text oldPrice">preço anterior</p>
    <p class="card-text price">Preço agora</p>
    <p class="card-text parcel">parcela</p>

    <div class="d-flex justify-content-between align-items-center">
      <div class="btn-group">
        <button type="button" class="btn btn-block">Comprar</button>
      </div>
    </div>
  </div>
  
  <!-- aqui inseres o app.js -->
  <script>
    const parentObject = document.getElementsByClassName("card-body");


    [...parentObject].forEach((parent, i) => {
      const childElement = document.createElement("p");
      childElement.className = "card-text";
      childElement.innerText = `second ${i}`;
      parent.appendChild(childElement);
      console.log(i)
    });
  </script>
</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .