Adding div container with class name and html content with JavaScript

Question

I'm looking for a way to add a div container using template literals. for example.

I have a div in my index.html

<div class="bag">

</div>

Every time the user adds a new item to the bag the following divs' get added inside the bag like so...

<div class="bag">
        <div class="bag__item"> // <--- added here
          <div class="wrapper--within">
            <img src="./assets/images/cookie5-small.jpg" alt="" />
            <h3 class="bag__unit-price">$5</h3>
            <div class="bag__quantity-container">
              <div class="bag__minus-sign"></div>
              <h3 class="bag__quantity-container__quantity">2</h3>
              <div class="bag__plus-sign-middle"></div>
              <div class="bag__plus-sign-center"></div>
            </div>
            <div class="bag__total-price-container">
              <img
                class="bag__trash-icon"
                src="./assets/images/trash-small.png"
                alt=""
              />
              <h2 class="bag__total-price">$10</h2>
            </div>
          </div>
        </div> // <-- to here
      </div>

In my javascript I target my bag container

class Cart {
  constructor() {
    this.cartContainer = document.querySelector(".bag");
    this.events();
  }

  events() {
    this.updateCart();
  }

  updateCart() {
    let newItemDiv = document.createElement("div")
    newItemDiv.className = "bag__item"
    newItemDiv.createElement("div")
  }
}

export default Cart;

I was originally planning to add each div individually but i would like a way where i can do something like..

  updateCart() {
    let newItemDiv = document.createElement("div")
    add `<div class="bag__item"> // <--- added here
          <div class="wrapper--within">
            <img src="./assets/images/cookie5-small.jpg" alt="" /> // <---image will change depending on item added
            <h3 class="bag__unit-price">$5</h3> // price will change depending on item added..
            <div class="bag__quantity-container">
              <div class="bag__minus-sign"></div>
              <h3 class="bag__quantity-container__quantity">2</h3>
              <div class="bag__plus-sign-middle"></div>
              <div class="bag__plus-sign-center"></div>
            </div>
            <div class="bag__total-price-container">
              <img
                class="bag__trash-icon"
                src="./assets/images/trash-small.png"
                alt=""
              />
              <h2 class="bag__total-price">$10</h2>
            </div>
          </div>
        </div> `
  }

Is this something that can be done?

Answer 1

In your updateCart() method you can write

updateCart() {
    let newItemDiv = document.createElement("div")
    newItemDiv.className = "bag__item"
    newItemDiv.innerHTML = `your markup here with the whole div hierarchy`;
}

Answer 2

You can do this. If you already added the div.bad

document.getElementsByClassName("bag").innerHTML = `<div> </div>`

or

var elemt = document.createElement("div")
elemt.innerHTML = `<div> </div>`  

Answer 3

You can do it like this: (I implemented below example by Cart class because in your question you've been using Cart class to create new Item and I consider that using this class is mandatory, there are other ways to acheive below result with less lines of code)

 class Cart { constructor(img, price) { this.img = img; this.price = price; this.cartContainer = document.querySelector('.bag'); this.events(); } getTemplate() { const template = `<div class="bag__item"> <div class="wrapper--within"> <img src="${this.img}" alt="" /> <h3 class="bag__unit-price">${this.price}</h3> <div class="bag__quantity-container"> <div class="bag__minus-sign"></div> <h3 class="bag__quantity-container__quantity">2</h3> <div class="bag__plus-sign-middle"></div> <div class="bag__plus-sign-center"></div> </div> <div class="bag__total-price-container"> <img class="bag__trash-icon" src="./assets/images/trash-small.png" alt="" /> <h2 class="bag__total-price">$10</h2> </div> </div> </div> `; return template; } events() { this.updateCart(); } updateCart() { const template = this.getTemplate(); let newItemDiv = document.createElement('div'); this.cartContainer.append(newItemDiv); newItemDiv.outerHTML = template; } } // sample img, price (You can set different values for img, price when you want to create new one, this static content is just for example) const img = 'https://fakeimg.pl/350x200/000000/?text=Image1'; const price = '100$'; function addBag(){ new Cart(img, price); }

 <button onClick="addBag()">click me</button> <div class="bag">ba continaer:</div>