如何撥打 append<img> 作為一個<li>到一個<ul></ul></li>

Question

我創建了一個 forEach 循環，它收集 10 個 gif 的 url，我想將它們 append 到我目前在第 33 行的 html 中。我必須在頁面上顯示 gif。 我目前正在獲取網址列表。 有沒有辦法讓我在頁面上有一個圖像列表來保留我目前擁有的大部分代碼？ 從第 55 行開始是我的 forEach 循環，我在其中嘗試附加 Child。

 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>

我已經編輯結束：

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

output 是損壞圖像的列表。

Answer 1

這樣的事情應該有效：

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

Answer 2

借助模板文字和HTML DOM insertAdjacentHTML() 方法，您可以輕松地生成 append 圖像。 我希望下面的代碼片段對您有很大幫助。

參考鏈接：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literalshttps://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp

 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); giffList.innerHTML = ''; // empty <ul> before listing giffUrl.forEach(function (singleGiff) { console.log(singleGiff) giffList.insertAdjacentHTML('beforeend', ` <li> <img src="${singleGiff.images.downsized.url}"> </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> <section class="giffs"></section> <ul class="list"></ul>

Answer 3

您需要一個新的li和img元素。 如果您想展示 GIF 本身，您應該將圖像的src屬性設置為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>