Как создать ссылки из значений массива

178

10 ноября 2017, 10:54

Имеется массив произвольной длины, т.е. каждый раз значения в нем разные и их кол-во - тоже.
Нужно создать на странице столько ссылок <a></a>, сколько значений есть в массиве. А их адресом должны стать значения из массива.

Пример:

var mass = [1, 123, 3, 7];
<div id="link_box"></div>

Получиться должно следующее:

<div id="link_box">
    <a href="1"></a>
    <a href="123"></a>
    <a href="3"></a>
    <a href="7"></a>
</div>

Как это сделать?

Answer 1

Создаём массив <a> элементов (а точнее jQuery обёрток над ними) из mass, после чего добавляем их к #link_box:

var mass = [1, 123, 3, 7]; 
var links = mass.map(function(href) { 
  return $("<a>", { href: href, text: href }); 
}); 
$("#link_box").append(links);

a { 
  display: block; 
}

<div id="link_box"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

text: href добавлено для наглядности примера.

Answer 2

Либо чуть более простой пример без jquery

HTML:

js:

var mass = [1, 123, 3, 7];
var res;
for (var i of mass) {
 if (res !== undefined) {
     res += '<a href="' + i + '">' + i + '</a>';
   } else {
     res = '<a href="' + i + '">' + i + '</a>';
   }
}
var resDiv = document.getElementById("link_box");
if (resDiv) {
  resDiv.innerHTML = res;
}

https://jsfiddle.net/e1ceyfev/1/

Answer 3

var links = ['https://ya.ru', 'https://google.com', 'https://mail.ru']; 
var a = document.createElement('a'); 
for (let i = 0; i < links.length; i++) { 
  link = a.cloneNode(); 
  link.href = links[i]; 
  link.innerHTML = links[i]; 
  link.className = 'denis'; 
  document.querySelector('#wrapper').appendChild(link); 
}

.denis{ 
  margin: 22px; 
}

<div id="wrapper"></div>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как реализовать такой автокомплит?

Есть вот такой вот сайт у него в поиске интересный автокомплит, подскажите как можно реализовать такой же или подобный? Возможно есть какие...

186

javascript

Как очистить холст навсегда, clearRect()

Суть проблемы: рисую линии на холсте, по клику мышкиВесь холст очищаю clearRect()

245

javascript

Файл js закодировался в 16ти ричный и больше не открывается visual studio

Доброго времени сутокПроблема вот в чём, жил был файл js в командном проекте visual studio TFS, и вдруг захожу утром в vs, а файл перестал открыватся...

183

javascript

Парсинг галереи изображений из js для android

Возникла задача спарсить с одного сайта галерею, которая формируется через jsПредыдущие вещи парсил через JSOUP, но со скриптами он не работает

208