how do I handle DOM with Foreach using HTML Collection iteration correctly?

Asked

Viewed 52 times

0

I’m having trouble creating elements dynamically. I just start the code and nothing happens in the DOM. There is an HTML Collection within parentObject that would be iterated 8 times inside the foreach, creating 8 simple paragraphs written "Second {iteration number]"

but I spin it and nothing happens at all.

The code is:

<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>

javascript html

  • Hi Julian, can you show all your HTML (at least the part related to the question) or create an example here that reproduces the problem? I don’t see anything wrong with your code.

  • this is the project. https://github.com/Jhenri-json/teste-linx-impulse I really couldn’t understand why it didn’t create new elements... Because the idea was then to use a json file to create the elements with the json objects.

1 answer

0


Your code is correct but it is running too early. You have to put the code at the end of the HTML so when it runs the HTML it has already been read.

Another alternative is a function similar to .ready() jQuery. In the background a callback run when the browser has loaded and read the HTML.

A simple example, putting Javascript after HTML, can be:

<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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.