Random commas appearing on html page on inspect when not in code-CodePudding

I have a simple HTML page and I am mapping an array to populate a div with cards. The card alignment was all wrong, so when I inspected it, I saw that there are commas after every card except the last one, which is ruining the alignment. I haven't added these commas in the code. My code:

    itemsdiv.innerHTML = items.map(el => {
        return (`
        <div >
            <span >${el.name}</span>
            <img  src=${el.src}>
            <div >
                <span >${el.color}</span>
            </div>
        </div>
        ` )
    })

itemsdiv is an empty div to populate, and items is an array that looks like this:

    items = [
        {
            name: 'T-Shirt',
            src: 'Images/Shirt.png',
            color: 'blue',
        },
        {
            name: 'Coffee Cup',
            src: 'Images/Coffee.jpg',
            color: 'red',
        }
    ]

When I inspect it looks something like this:

<div >
   <div ></div>
   ","
   <div ></div>
   ","
   <div ></div> 
</div>

CodePudding user response：

After .map try tagging on .join(" ")