Взять ссылки с input value и добавить в div как <img url="ссылка"/>

Рейтинг: 1Ответов: 2Опубликовано: 27.04.2023

Есть input со ссылками на картинки.

<input type="text" name="linkImages" id="addLinkImages" value="http://site.ru/img-1.jpg, http://site.ru/img-2.jpg , http://site.ru/img-3.jpg">

Как мне при загрузке страницы взять эти ссылки и вставить их в div виде тега img со ссылкой. В этоге должно получится так.

<div id="images">
  <img url="http://site.ru/img-1.jpg">
  <img url="http://site.ru/img-2.jpg">
  <img url="http://site.ru/img-3.jpg">
</div>

Помогите написать код.

javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Получаем значение из поля, затем разбиваем его, образуя массив. Перебираем массив, создавая элементы с нужными адресами и добавляя их в родительский блок:

$('#addLinkImages').val().split(',').forEach((el, i) => {
  $('#images').append(`<img src="${el.trim()}" alt="Картинка №${i}">`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="linkImages" id="addLinkImages" value="http://site.ru/img-1.jpg, http://site.ru/img-2.jpg , http://site.ru/img-3.jpg">
<div id="images"></div>

▲ 0
  let imageUrl = $('#addLinkImages').val().split(',');
  imageUrl.forEach(item =>{
    $('#images').append(` <img url="${item}">`)
   })

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