试图附加到HTML的JavaScript不起作用

我正在尝试用HTML、CSS和JavaScript创建一个简单的电子商务网站。当用户将项目添加到购物车时，我将该项目添加到本地存储，我希望当用户转到他们的购物车时，本地存储中的所有项目都将被读取，然后显示到购物车中。每当我尝试附加时，我都会得到这个。不是显示HTML，而是显示所有HTML的字符串

function getCartItems() {
  var items = JSON.parse(localStorage.getItem("cartItems"));
  console.log({ items });

  for (let i = 0; i < items.length; i++) {
    console.log(items[i]);
    var cartRow = document.createElement("div");
    // cartRow.classList.add("cart-row");

    var cartItems = document.getElementsByClassName("cart-items")[0];
    var cartRowContents = ` <li class="list-group-item d-flex flex-column">
      <div class="row">
      <div class="col col-lg-4">
      <img
      src="${items[i].image}"
      alt="${items[i].name}"
      class="d-block mx-auto"
      />
      </div>
      <div class="col col-lg-2 text-center">
      <h5 class="mt-4 flex-wrap">${items[i].name}</h5>
      <p>Size: 10.5</p>
      <h2><span class="badge badge-danger">$189.99</span></h2>
      </div>
      <div class="col mt-4 text-center">
      <p class="font-weight-bold">Quantity</p>
      <input type="number" value="1" class="pl-2 w-50 rounded cart-quantity" />
      <button
      class="btn border border-none mx-5 mt-3 mt-lg-0 remove-item"
      >
      <i class="far fa-trash-alt"> </i>
      </button>
      </div>
      </div>
      </li>`;
    cartRow.innerText = cartRowContents;
    cartItems.append(cartRow);
  }
}

函数getCartItems（）{ var items=JSON.parse（localStorage.getItem（“cartItems”）； log（{items}）； for（设i=0；i ${items[i].name} 尺寸：10.5

$189.99 数量

`； cartRow.innerText=cartRowContents； cartItems.append（cartRow）； } } 下面是我的HTML代码

 <!-- Cart -->
    <div class="card m-5 border border-none mw-50">
      <div class="card-header text-center text-white bg-primary">
        Your Order
      </div>

      <ul class="list-group list-group-flush cart-items">
        <li class="list-group-item d-flex flex-column">
          <div class="row">
            <div class="col col-lg-4">
              <img
                src="./images/products/air-max-270.jpg"
                alt="Air Max 270"
                class="d-block mx-auto"
              />
            </div>
            <div class="col col-lg-2 text-center">
              <h5 class="mt-4 flex-wrap">Nike Air Max 270</h5>
              <p>Size: 10.5</p>
              <h2><span class="badge badge-danger">$189.99</span></h2>
            </div>
            <div class="col mt-4 text-center">
              <p class="font-weight-bold">Quantity</p>
              <input type="number" value="1" class="pl-2 w-50 rounded cart-quantity" />
              <button
                class="btn border border-none mx-5 mt-3 mt-lg-0 remove-item"
              >
                <i class="far fa-trash-alt"> </i>
              </button>
            </div>
          </div>
        </li>
       </ul>

您点的菜


Nike Air Max 270
尺寸：10.5

$189.99
数量

这是因为您使用的是

innerText

。您可以改为使用

innerHtml

，但不建议这样做。

这是因为您使用的是

innerText

。您可以改为使用

innerHtml

，但不建议这样做。

您这样做的唯一方法是像上次回答一样使用innerHtml。但是，如果您想使用“推荐”的方式，我建议您使用一种叫做HTMLDOM的方法。您只需使用创建元素的概念，然后将它们彼此附加，最后添加到购物车，就可以重新编码所做的一切。以下是一个简单的概念：

---

按照您的方式，您唯一可以实现这一点的方法是像上次回答一样使用innerHTML。但是，如果您想使用“推荐”的方式，我建议您使用一种叫做HTMLDOM的方法。您只需使用创建元素的概念，然后将它们彼此附加，最后添加到购物车，就可以重新编码所做的一切。以下是一个简单的概念：

---

您似乎混淆了，因为后者将字符串设置为节点的实际文本，而不是其HTML

---

但是，由于不鼓励使用

Element.innerHTML

来操作节点的HTML，因此您应该改为使用。

您似乎混淆了，因为后者将字符串设置为节点的实际文本，而不是其HTML

---

但是，由于不鼓励使用

Element.innerHTML

来操作节点的HTML，因此应改为使用。

使用innerHTML调用appendChild:

var cartItems = document.getElementsByClassName("cart-items")[0];
var cartRow = document.createElement("div");
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow);

---

注意：innerHTML仅在与+=运算符结合使用时具有破坏性，因为它会导致DOM刷新。可以将它与

createElement

一起使用，因为您只更改子对象的innerHTML，而不是整个DOM

使用innerHTML调用appendChild:

var cartItems = document.getElementsByClassName("cart-items")[0];
var cartRow = document.createElement("div");
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow);

---

注意：innerHTML仅在与+=运算符结合使用时具有破坏性，因为它会导致DOM刷新。可以将它与

createElement

一起使用，因为您只更改子对象的innerHTML，而不是整个DOM

它不是

appendChild

？您可能打算使用

.innerHTML

，就像您将

cartRowContents

设置为其文本内容一样（请参阅）。但是，您应该看看.Change

artRow.innerText=cartRowContents

to

cartRow.innerHTML=cartRowContents

DOM元素由

innerHTML

附加，不是吗

appendChild

？您可能打算使用

.innerHTML

，就像您将

cartRowContents

设置为其文本内容一样（请参阅）。但是，您应该看看.Change

artRow.innerText=cartRowContents

to

cartRow.innerHTML=cartRowContentsDOM元素由
innerHTML
附加，建议使用什么？不正确：downvote
innerHTML
仅在与
+=
运算符结合使用时才具有破坏性，因为它会导致DOM刷新。当与
appendChild
一起使用时，它绝对无害。建议使用什么？不正确：向下投票
innerHTML
仅在与
+=
运算符结合使用时才具有破坏性，因为它会导致DOM刷新。与
appendChild
一起使用绝对没有害处。