'Dynamically add divs to html from node/express

I'm trying to use express.js to search for images through an API, and then dynamically add those images to my image container div.

My initial thought was to just add them as I would when not using node and loop through the images and append them to the container:

Pseudocode
for(i, i<20, i++){
  document.getElementById('TheContainerDivForAllImages').append(singeImageDivWithImage[i])
}

but I noticed that wasn't possible, as I can't use document.anything, so how do I go about doing this instead?

I want to keep my frontend library-free but I will of course use what is needed in the backend to get this to work if it's very hard to do manually.

Thank you very much!

https://codepen.io/programmingcuriosity/pen/QWQNOVQ or maybe snippet is better

import Flickr from "flickr-sdk";
import express, { Router } from "express";

let app = express();
app.use(express.static("public"));

var flickr = new Flickr(process.env.FLICKR_API_KEY);
flickr.photos
  .search({
    text: "example" //also need to get the searchInput to here so I get the right images
  })
  .then(function(res) {
    console.log("yay!", res.body.photos);
  })
  .catch(function(err) {
    console.error("bonk", err);
  });

//So far everything is working, but I essentially want to
//loop through a few images from "res.body.photos"
//and add them as
//<div class="singleImage"> <img src="urlFromPhotos"> </div>
//and append them to the allImages div.
//But I can't figure out how to do it when I can't loop over
// document.getElementById('allImages').append(singeImageDiv[i])

* {
  box-sizing: border-box;
}

#searchDiv {
  width: 25%;
}

#container {
  width: 100%;
  color: aquamarine;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#seachInput {
  width: 50%;
}

#allImages {
  width: 100%;
  heigth: 500px;
  background-color: blue;
  margin: 1vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.singleImage {
  border-color: black;
  border: 2px;
  width: 20%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="index.css" />
  <title>apitest</title>
</head>

<body>
  <div id="container">
    <div id="searchDiv">
      <input type="text" placeholder="What do you want to see images of?" id="seachInput" />
      <button id="searchButton" type="button" onclick="getInputValue();">
        Search
      </button>
    </div>
    <div id="allImages">
      PLACEHOLDER
    </div>
  </div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Dynamically add divs to html from node/express

Sources

Related Questions