不在代码中时检查页面上出现随机逗号 html

Question

我有一个简单的 HTML 页面，我正在映射一个数组以用卡片填充 div。卡片对齐全错了，所以当我检查它时，我看到除了最后一张之外，每张卡片后面都有逗号，这破坏了对齐。我没有在代码中添加这些逗号。我的代码：

    itemsdiv.innerHTML = items.map(el => {
        return (`
        <div class="item">
            <span class="item-title">${el.name}</span>
            <img class="item-image" src=${el.src}>
            <div class="item-details">
                <span class="item-color">${el.color}</span>
            </div>
        </div>
        ` )
    })

itemsdiv 是要填充的空 div，items 是一个数组，如下所示：

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

当我检查时它看起来像这样：

<div class="itemsdiv">
   <div class="item"></div>
   ","
   <div class="item"></div>
   ","
   <div class="item"></div> 
</div>

Answer 1

在 .map 之后尝试在 .join(" ")

上添加标签

基于@VLAZ 评论的解决方案：

When you convert an array to a string, it automatically joins the elements with commas between them. Assigning an array to innerHTML converts it to a string.

不在代码中时检查页面上出现随机逗号 html

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

html

javascript

arrays

innerhtml