I am trying to create a specific html structure using javasacript dyanamically, but don't know how to do it

Question

I fetching some data with api and want o use them and show them on my HTML page using pure javascript. My current HTML:

<button onclick="load()">Load data</button>
<div id="main"></div>

My expected structure to use API data:

<div id="main">
 <div class="wrapper">
   <img src="link will come from API" class="img-class">
   <h6 class="title"></h6>
 </div>
<div class="wrapper">
   <img src="link will come from API" class="img-class">
   <h6 class="title"></h6>
 </div>
<div class="wrapper">
   <img src="link will come from API" class="img-class">
   <h6 class="title"></h6>
 </div>
<div class="wrapper">
   <img src="link will come from API" class="img-class">
   <h6 class="title"></h6>
 </div>
.
.
.
.
.
....
</div>

Here is my js:

function load(){
  fetch("https://jsonplaceholder.typicode.com/photos")
    .then(function(response){
    return response.json()
  })
    .then((response)=>{
    var counter=0;
    for (var data of response) 
    {
      if(counter == 99){
        break;
        alert("end");
      }else{
        var wrapper = document.createElement('div');
        var img = document.createElement('img');
        img.src = data.url;
        img.setAttribute("class","img-class");
        document.getElementById('main').appendChild(img);
        document.getElementById('main').appendChild(img);
        counter++; 
      }
    }
  })
}

I was able to load images but now I want to make a proper structure. Here is working copen link.

Answer 1

You can create each element, set the attributes, then append it to it's parent. Since you didn't specify the structure of the data your API returns, you'll have to change the code to support your API. In your case, something like this should work.

for (var data of response) {
    const imageUrl = data['image'] // you'd want to change this

    const wrapperDiv = document.createElement('div');
    wrapperDiv.classList.add('wrapper');
    
    const imgElem = document.createElement('img');
    imgElem.src = imageUrl;
    imgElem.classList.add('img-class');
    wrapperDiv.appendChild(imgElem);

    // You didn't specify what you wanted 
    // to do with the title so make sure to add
    // to this part.
    const titleElem = document.createElement('h6');
    titleElem.classList.add('title');
    wrapperDiv.appendChild(titleElem);

    document.getElementById('main').appendChild(wrapperDiv);

}

Answer 2

just append img to wrapper

wrapper.appendChild(img)

then append wrapper to the document

document.getElementById('main').appendChild(wrapper)