0
<!DOCTYPE html>
<html>
    <head>
        <script>
            var cart = document.createElement("div");
            cart.classList.add("cart-row");
            var cart_products = document.getElementsByClassName("cart-items");
            var cartContent = `<div class="cart-item">
                    <span class="cart-item-title">FruitCereal</span>
                </div>
                <span class="cart-price">26.90€</span>
                <div class="cart-quantity">
                    <input class="cart-quantity-input" type="number" value="1">
                    <button class="btn btn-danger" type="button">REMOVE</button>
                </div>`
            cart.innerHTML = cartContent;
            cart_products.append(cart);  
        </script>     
    </head>

    <body>
        <div class="cart-items">
            
        </div>
    </body>

He shows me the error "Uncaught TypeError: cart_products.append is not a function". The same happends with appendChild and .push. I think that I approach the matter completely wrong and overlook something or have misunderstood something.

adi
  • 1
  • 1
  • 3
    `getElementsByClassName` returns multiple elements. Use a loop, or `getElementsByClassName()[0]` – 0stone0 Dec 13 '21 at 10:28
  • 1
    `cart_products` is a collection, not a node. Why do you think it's called `getElementsByClassName` and not `getElementByClassName`? If there is only one match, use `document.querySelector('.cart-items')`. – connexo Dec 13 '21 at 10:28
  • Agree + the proper function to use is [`appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) – Peter B Dec 13 '21 at 10:31
  • 2
    *Why cant i add a div to a div* Because that is not what your code tries to do. – connexo Dec 13 '21 at 10:33

0 Answers0