Ad

How To Append As A
  • To A
    • I've created a forEach loop that is collecting the urls of 10 gifs and I want to append them to a I currently have in my html on line 33. I have to display the gifs on the page. I'm currently getting a list of the urls. Is there a way I can have a list of images on the page keeping most of the code I currently have? From line 55 down is my forEach loop where I am trying to appendChild.

      const button = document.querySelector("#search-btn");
      button.addEventListener("click", (event) => {
        event.preventDefault();
      
        const giffTitle = document.querySelector("#giffTitle").value;
      
        axios;
        const giffSection = document.querySelector(".giffs");
        const giffList = document.querySelector(".list");
      
        axios
          .get(
            `https://api.giphy.com/v1/gifs/search?api_key=iVwoS0brONsmkA6sWVqHgJ9D7g2WYDmv&q=${giffTitle}&limit=10&offset=0&rating=g&lang=en`
          )
          .then((res) => {
            const giff = res.data;
            // const giffUrl = giff.data[0].embed_url;
            const giffUrl = giff.data;
            console.log(giffUrl);
      
            giffUrl.forEach(function(singleGiff) {
              let img = document.createElement("li");
              img.textContent = singleGiff.embed_url;
              giffList.appendChild(img);
              console.log(singleGiff.embed_url);
            });
          });
      });
      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      
      <h1>Giffs</h1>
      <form action="">
        <label for="">Search</label>
        <input type="text" id="giffTitle" />
        <button id="search-btn">Search</button>
      </form>
      <iframe id="iframe" src="${giffUrl}" width="480" height="270" frameborder="0" class="giphy-embed" allowfullscreen></iframe>
      
      <section class="giffs"></section>
      <ul class="list"></ul>

      I've edited to end to:

      giffUrl.forEach(function (singleGiff) {
                    let img = document.createElement("img");
                    img.src = singleGiff.embed_url;
                    let list = document.createElement("li");
      
                    list.appendChild(img);
                    giffList.appendChild(list);
                    console.log(singleGiff.embed_url);
                  });
      

      and the output is a list of broken images.

      Ad

      Answer

      You need both a new li and img element. And if you would like to present the GIF itself you should set the src attribute of the image to singleGiff.images.downsized.url.

      const button = document.querySelector("#search-btn");
      button.addEventListener("click", (event) => {
        event.preventDefault();
      
        const giffTitle = document.querySelector("#giffTitle").value;
      
        axios;
        const giffSection = document.querySelector(".giffs");
        const giffList = document.querySelector(".list");
      
        axios
          .get(
            `https://api.giphy.com/v1/gifs/search?api_key=iVwoS0brONsmkA6sWVqHgJ9D7g2WYDmv&q=${giffTitle}&limit=10&offset=0&rating=g&lang=en`
          )
          .then((res) => {
            const giff = res.data;
            // const giffUrl = giff.data[0].embed_url;
            const giffUrl = giff.data;
            //console.log(giffUrl);
      
            giffUrl.forEach(function(singleGiff) {
              let li = document.createElement("li");
              let img = document.createElement("img");
              img.src = singleGiff.images.downsized.url;
              li.appendChild(img);
              giffList.appendChild(li);
            });
          });
      });
      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      
      <h1>Giffs</h1>
      <form action="">
        <label for="">Search</label>
        <input type="text" id="giffTitle" />
        <button id="search-btn">Search</button>
      </form>
      <iframe id="iframe" src="${giffUrl}" width="480" height="270" frameborder="0" class="giphy-embed" allowfullscreen></iframe>
      
      <section class="giffs"></section>
      <ul class="list"></ul>

      Ad
      source: stackoverflow.com
      Ad