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?

Tamir Abutbul · Accepted Answer · 2021-12-14 11:27:23Z

2

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

edited Dec 14, 2021 at 11:27

Tamir Abutbul

7,6418 gold badges27 silver badges61 bronze badges

answered Dec 14, 2021 at 10:58

Danny Raufeisen

1,0139 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sharath N B · Accepted Answer · 2021-12-14 11:00:36Z

1

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>`

answered Dec 14, 2021 at 11:00

Sharath N B

251 silver badge10 bronze badges

Comments

Saeed Shamloo · Accepted Answer · 2021-12-14 11:05:33Z

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>

Collectives™ on Stack Overflow

Adding div container with class name and html content with JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related