JavaScript trying to append to HTML not working

Question

I am trying to create a simple eCommerce website with HTML, CSS, and JavaScript. When a user adds an item to their cart I add that item to local storage and I want when the user goes to their cart, all the items in local storage are read and then displayed to the cart. Whenever I try to append I get this. Instead of displaying the HTML it displays a string of all the HTML?

bug image

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);
  }
}

Here is the code for my 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>

You might have meant to use `.innerHTML`, as in your case you are setting `cartRowContents` to be its text-content (see [`TextNode`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). However, you should take a look at [`Element.insertAdjacentHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML). — Oskar Grosser, Dec 11 '20 at 07:48
Change `artRow.innerText = cartRowContents;` to `cartRow.innerHTML= cartRowContents;` DOM elements are append by `innerHTML` — Ahmad Habib, Dec 11 '20 at 08:15

score 1 · Answer 1 · answered Dec 11 '20 at 07:59

It seems you have confused Element.innerHTML with HTMLElement.innerText, as the latter sets your String to be the Node's actual text, not its HTML.

However, since it is discouraged to use Element.innerHTML for manipulating a Node's HTML, you should instead use Element.insertAdjacentHTML() instead.

score 1 · Accepted Answer · answered Dec 11 '20 at 08:01

Call appendChild with innerHTML:

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

Note: innerHTML is only destructive when used in combination with the += operator, as it causes a DOM refresh. It's all right to use it with createElement, as you're only changing the child's innerHTML, not the entire DOM. Reference

score 0 · Answer 3 · answered Dec 11 '20 at 07:47

0

This is because you are using innerText. You can use innerHtml instead but it's not recommended.

answered Dec 11 '20 at 07:47

Shayan

238
4
11

What is recommended? – Aalexander Dec 11 '20 at 07:50
Not correct: downvote. `innerHTML` is only destructive when used in combination with the `+=` operator, as it causes a DOM refresh. It's definitely not harmful when used with `appendChild`. – benhatsor Dec 11 '20 at 07:56

score 0 · Answer 4 · answered Dec 11 '20 at 07:55

The way you are doing this, the only way you can pull it off is by using innerHTML like your last answer. However, if you want to do it the 'recommended' way, I would recommend using something called HTML DOM. You can recode all that you did simply by using the concept of creating elements and then appending them to each other and, finally, your cart. Here is the simple concept: https://www.w3schools.com/js/js_htmldom.asp

JavaScript trying to append to HTML not working

4 Answers4