设置cartItem.innerHTML报Uncaught SyntaxError无效或意外标记错误如何解决

• 普通双引号/单引号不支持多行字符串写法，你直接把HTML内容拆成多行用双引号包裹，JS解析时会判定字符串未闭合，抛出语法错误
• 外层字符串用了双引号，内部HTML属性也用了双引号，引号嵌套冲突，会被识别为字符串提前结束，后面的内容都属于非法token
• 字符串中使用了${item.xxx}的模板插值语法，普通字符串不支持该写法，无法解析变量还会触发语法错误

将包裹HTML内容的普通双引号替换为ES6模板字符串的反引号（`）即可，反引号支持多行书写、模板插值，也不会和内部HTML的双引号属性冲突。
另外原代码中价格span标签重复定义了两次class属性，可合并为一个避免样式异常。
修复后完整代码如下：

const cartItem = document.createElement('div');
cartItem.className = "cart-item d-flex justify-content-between text-capitalize my-3";

cartItem.innerHTML = `
<img src="${item.img}" class="img-fluid rounded-circle" id="item-img" alt="" width="50" height="50">
<div class="item-text">
  <p id="cart-item-title" class="font-weight-bold mb-0">${item.name}</p>
  <span>$</span>
  <span id="cart-item-price" class="cart-item-price mb-0">${item.price}</span>
</div>
<a href="#" id="cart-item-remove" class="cart-item-remove">
  <i class="fas fa-trash"></i>
</a>`;

内容的提问来源于stack exchange，提问作者Zeba Malik