Как добавить <img> как <li> к <ul>

Я создал цикл forEach, который собирает URL-адреса 10 картинок, и я хочу добавить их к тому, что у меня есть в моем html в строке 33. Я должен отображать гифки на странице. В настоящее время я получаю список URL-адресов. Есть ли способ, которым я могу иметь список изображений на странице, сохраняя большую часть кода, который у меня есть в настоящее время? Начиная со строки 55 находится мой цикл forEach, в котором я пытаюсь добавить дочерний элемент.

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.info(giffUrl);

      giffUrl.forEach(function(singleGiff) {
        let img = document.createElement("li");
        img.textContent = singleGiff.embed_url;
        giffList.appendChild(img);
        console.info(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.info(singleGiff.embed_url);
            });

и вывод представляет собой список сломанных изображений.

Не создавайте элемент li и назовите его img... Создайте новый элемент img и установите его атрибут src на URL вашего изображения. Затем добавьте это к вновь созданному li, а затем li к элементу списка.

— 21.03.2022 11:35

Кажется, он возвращает список неработающих изображений.

— 21.03.2022 11:52

Значение embed_url приводит к HTML-страница, подобному https://giphy.com/embed/3o85xBA2qKZsoe7Cy4 — вы, конечно, не можете указать HTML-документ в качестве «источника» изображения. Вам нужно будет выбрать один из URL-адресов, которые напрямую ссылаются на изображение (если они вообще есть, я не могу сказать наверняка).

— 21.03.2022 11:58

javascript html dom appendchild dom-manipulation

21.03.2022 11:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Что-то вроде этого должно работать:

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.info(singleGiff.embed_url);
});

21.03.2022 11:47

Вы можете легко добавить изображение с помощью Литералы шаблонов и 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.info(giffUrl);
giffList.innerHTML = ''; // empty <ul> before listing
        giffUrl.forEach(function (singleGiff) {
            console.info(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>

21.03.2022 11:48

Ответ принят как подходящий

Вам нужны оба новых элемента 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.info(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>

21.03.2022 11:50

Другие вопросы по теме

Как заставить работать кнопку «Назад» (функция)? JS

Как лучше всего центрировать текст по вертикали с помощью CSS (в моей ситуации)?

Делаем центр флажка пустым

Установите максимальную ширину для div с дочерними элементами в абсолютном

Динамическое назначение цвета фона и цвета рамки кнопкам в angular

Холст HTML не создает изображение с веб-камеры

HTML-форма отправки для экспресс-req.params с маршрутами

Как сделать флажок, который может показывать пароль?

Как изменить порядок отображения одного из элементов по отдельности, используя flex

Входная группа Bootstrap5 с btn-group-vertical

Как добавить <img> как <li> к <ul>

Ответы 3

Другие вопросы по теме

Похожие вопросы