Populating every div instead of only the first one-CodePudding

I have been trying to create a single div with its respective children but the loop creates all the DIVs related to the API but populates all the IMG inside the first div. What I'm trying to achieve is creating this through a loop:

<div id="box" class="box">

    <span class="title"></span>

    <a href="#link from image">
        <img src="#url goes here" />
    </a>

</div>

So later I can create cards individually in CSS to organize each thumbnail as a link as well as the title on top and wrapped inside the image.

The JS I have so far for this is as follows:

const form = document.querySelector('#buscarPosts')

/* document.addEventListener('load', async function(e) {
    e.preventDefault();
    const loadPage = await axios.get('https://api.devall.com.br/api/v1/post')

    const loadFirst = (firsts) => {
        for (let firstLoad of firsts) {
            const div = document.createElement('DIV');
        div.id = 'box';
        div.classList.add('box');

        const img = document.createElement('IMG');;        
        img.src = result.thumbnail;
        img.classList.add('thumbnailClass')

        const title = document.createElement('SPAN');
        title.classList.add('title')
        title.innerHTML = result.titulo;


        document.querySelector("#container").append(div)
        document.querySelector("#box").append(title);
        document.querySelector("#box").append(img);
        }
    }

    loadFirst(loadPage.data)
}) */

form.addEventListener('submit', async function(e){
    e.preventDefault();
    const searchValue = form.elements.search.value;
    const res = await axios.get(`https://api.devall.com.br/api/v1/post?search=${searchValue}`)

    addThumbnails(res.data);
})

const addThumbnails = (previews) => {
    for (let result of previews) {

        const box = document.createElement('DIV');
        box.id = 'box';
        box.classList.add('box');

        const img = document.createElement('IMG');      
        img.src = result.thumbnail;
        img.classList.add('thumbnailClass')

        const title = document.createElement('SPAN');
        title.classList.add('title')
        title.innerHTML = result.titulo;


        document.querySelector("#container").append(box)
        document.querySelector("#box").append(title);
        document.querySelector("#box").append(img);
    } 
    
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: url("../images/pexels-scott-webb-3255761.jpg");
  filter: saturate(150%);
  background-size: cover;
}

fieldset {
  margin: 0;
  padding: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
  border: 0;
}

.s006 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items:flex-start;
  font-family: 'Poppins', sans-serif;
  padding-top: 50px;
  margin-bottom: 50px;
}

.s006 form {
  width: 100%;
  max-width: 790px;
}

.s006 form legend {
  font-size: 36px;
  color: #fff;
  font-weight: 800;
  text-align: center;
  margin-bottom: 30px;
}


.s006 form .inner-form .input-field {
  height: 50px;
  width: 100%;
  position: relative;
}

.s006 form .inner-form .input-field input {
  height: 100%;
  width: 100%;
  background: transparent;
  border: 0;
  background: #fff;
  display: block;
  width: 100%;
  padding: 10px 32px 10px 30px;
  font-size: 18px;
  color: #666;
  border-radius: 34px;
}


.s006 form .inner-form .input-field input:hover, .s006 form .inner-form .input-field input:focus {
  box-shadow: none;
  outline: 0;
}

.s006 form .inner-form .input-field .btn-search {
  width: 70px;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: absolute;
  right: 0;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.s006 form .inner-form .input-field .btn-search svg {
  fill: #ccc;
  width: 30px;
  height: 30px;
  transition: all .2s ease-out, color .2s ease-out;
}

.s006 form .inner-form .input-field .btn-search:hover, .s006 form .inner-form .input-field .btn-search:focus {
  outline: 0;
  box-shadow: none;
}

.s006 form .inner-form .input-field .btn-search:hover svg, .s006 form .inner-form .input-field .btn-search:focus svg {
  fill: #666;
}

.container {
  max-width: 1520px;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: flex-start;
}


.thumbnailClass {
  height: 200px;
  padding: 18px;
  opacity: 0.6;
  text-align: center;
}

.thumbnailClass:before {
  content:'';
  display: table;
  float:left;
  padding-top:100%;
}

.thumbnailClass:hover {
  background-color: rgba(255, 255, 255, 0.0);
  opacity: 1;
  transition: background-color 0.5s;
  transition: opacity 0.5s;
}

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,800" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>

    <div class="s006">
      <form id="buscarPosts">
        <fieldset>
          <legend style="color: black;">/dev/All</legend>
          <div class="inner-form">
            <div class="input-field">
              <button class="btn-search" type="submit">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                </svg>
              </button>
              <input id="search" type="text" placeholder="Search for a post"/>
            </div>
          </div>
        </fieldset>
      </form>

    </div>
    <post id="container" class="container">
        
    </post>
  </body>
  <script src="js/main.js"></script>
</html>

The issue is, only the first DIV created is populated with all the images inside and what I want is, for every div a separated img like the first example I posted. Please help!

CodePudding user response：

When you append an element to the document the element is being populated with closing tag. It is not open so you can add other elements inside it. To append element inside the box, just use box.append....

 document.querySelector("#container").append(box)
 box.append(title);
 box.append(img);