Почему используется лишь последний элемент массива?

Question

[Ignatiy2]

Допустим, у меня есть p и я хочу его изменить на элементы массива и делаю это так:

var p = document.querySelector("p");  //Параграф
var button = document.querySelector(".button");  //Кнопка

var arr = ["Яблоко", "Апельсин", "Лимон"];  //Массив

button.onclick = function() {
	for(var i = 0; i < arr.length; i++) {
		p.innerHTML = arr[i];
	}
}

Я ожидаю увидеть "Яблоко, Апельсин, Лимон", но вижу "Лимон". Буду признателен если объясните новичку почему так происходит и как сделать так, чтобы параграф изменялся на все элементы массива

Answer 1

[Алексей Юдов]

p.innerHTML += arr[i];
Ответ.

Answer 2

[Кирьян Горячев]

button.onclick = function() {
let newtext;
for(var i = 0; i < arr.length; i++) {
if (i