Commas appearing in html after array mapping

Question

I have made a map of an array that take the value of it to show a corresponding image. Everything works fine except for the fact some commas are appearing between those lines.

I have tried to convert the array to string and remove the commas, but then the mapping stops working for a reason I can't truly understand.

Right now mapping goes like:

  const images = imgArr.map(n => `<p><img src="img/test/${n}.png" style="width: 100px; min-width: 500px; image-rendering: crisp-edges;" /> </p>`)
  var h = document.getElementById("myH2");
  h.insertAdjacentHTML("afterend", images);

Any idea how can I proceed with this?

Answer 1

Use the .join('') method on array, to convert to a string without the commas

...  
h.insertAdjacentHTML("afterend", images.join(''));