HELP // Trying to print even and odd numbers

Hey All,

I've just started out with JavaScript and was trying to play around with modifying & printing to the DOM.

My aim was to print the numbers 1 - 100 with a description after explaining if they were even or odd.

I.e.

The number 1 is odd
The number 2 is even
The number 3 is odd
.
.
.
The number 100 is even

This is what I've been trying:

const numberDiv = document.querySelector('div#numberDiv');
const numberArray = [];

for ( let i = 1; i <= 100; i++ ) {
  if ( i % 2 == 0 ) {
    numberArray.push(`<p>The number ${i} is even</p>`);
  } else {
    numberArray.push(`<p>The number ${i} is odd</p>`);
  }
}

numberDiv.innerHTML = numberArray;

The best way I have found so far is to push the value on each loop to an array and then print the entire array. However, it's now printing a comma on a separate line, like so:

The number 1 is odd

,
The number 2 is even

,
The number 3 is odd

etc.

I know array items are separated by a comma within the array, but thought that they weren't shown when the array was printed -- as normally you'd have to use the .join(', ') method to include the comma.

The two main questions I have are:

1) What would be the best solution to this problem?
2) What's going wrong with my code?

Thanks in advance.

✌️