Как вывести значения из массива в 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 className = 'класс элементов';.

Какие тут есть варианты:

document.querySelectorAll(`.${className}`).forEach((n, i) => {
  n.innerText = arr[i];
});

// или

for (const [ i, n ] of document.querySelectorAll(`.${className}`).entries()) {
  n.innerHTML = arr[i];
}

// или

arr.forEach(function(n, i) {
  this[i].textContent = n;
}, document.getElementsByClassName(className));

// или

const elems = document.getElementsByClassName(className);
for (let i = 0; i < elems.length; i++) {
  elems[i].appendChild(document.createTextNode(arr[i]));
}