Как вывести значения из массива в html?

Question

[aftar]

Есть массив var arr = ['яблоко','груша','апельсин'];

и html

<div class="fruits"></div>
<div class="fruits"></div>
<div class="fruits"></div>

Надо вывести значения из массива чтобы было

<div class="fruits">яблоко</div>
<div class="fruits">груша</div>
<div class="fruits">апельсин</div>

Answer 1

[Александр]

Comments

[aftar]

спасибо!

Answer 2

[Владимир Проскурин]

// html (можно text) меняет содержимое, если передать функцию, то для каждого элемента будет вызвана эта функция,
// и в html будет заполнено возвращаемое значение из этой функции. 
jQuery('.fruits').html(function(ind) { 
   return arr[ind];
});

пример https://jsfiddle.net/Vlad_IT/ecz9xs0f/

Comments

[aftar]

спасибо!

Answer 3

[0xD34F]

Куда надо разложить значения элементов массива:

const elems = document.querySelectorAll('.fruits');

Раскладываем:

elems.forEach((n, i) => n.append(arr[i]));

// или

for (const [ i, n ] of elems.entries()) {
  n.innerText = arr[i];
}

// или

for (let i = 0; i < elems.length; i++) {
  elems[i].textContent = arr[i];
}

// или

(function next(i, n = elems.item(i)) {
  n && (n.appendChild(new Text(arr[i])), next(-~i));
})(0);