如何將<img>作為<li>附加到<ul>

我創建了一個 forEach 回圈，它收集 10 個 gif 的 url，我想將它們附加到我目前在第 33 行的 html 中。我必須在頁面上顯示 gif。我目前正在獲取網址串列。有沒有辦法可以在頁面上保留我目前擁有的大部分代碼的影像串列？從第 55 行開始是我的 forEach 回圈，我正在嘗試 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>

我已經編輯結束：

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

輸出是損壞影像的串列。

uj5u.com熱心網友回復：

像這樣的東西應該作業：

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

uj5u.com熱心網友回復：

你需要一個新的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>

uj5u.com熱心網友回復：

您可以借助模板文字和HTML DOM insertAdjacentHTML() 方法輕松附加影像。我希望下面的代碼片段對你有很大幫助。

參考鏈接：
https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals https://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>

標籤：javascript html dom 附子 支配权

上一篇：如何將“npmstart”決議為“找不到模塊”？

下一篇：為什么我從WebAPI呼叫方法時收到陣列JSON回應？