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.

If you wrote the function above, it's hard to understand why you have trouble modifying it to output the desired outcome. Unless you've taken it from somewhere else, you don't understand how it works and you simply want it modified by someone who does. What's not clear? Inside the loop, create an `h6` tag, add `title` class to it, append the `img` and the `h6` to the `wrapper` and only append the `wrapper` to `#main`. — tao, Jan 22 '22 at 02:32

score 0 · Answer 1 · answered Jan 22 '22 at 02:29

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

}

score 0 · Answer 2 · answered Jan 22 '22 at 02:33

0

just append img to wrapper

wrapper.appendChild(img)

then append wrapper to the document

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

answered Jan 22 '22 at 02:33

Jack Ting

552
4
6

Thanks a lot wasn't expecting it to be that easy it worked. – Jan 22 '22 at 02:52

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

2 Answers2