Adding div container with class name and html content with JavaScript-CodePudding

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 >

</div>

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

<div >
        <div > // <--- added here
          <div >
            <img src="./assets/images/cookie5-small.jpg" alt="" />
            <h3 >$5</h3>
            <div >
              <div ></div>
              <h3 >2</h3>
              <div ></div>
              <div ></div>
            </div>
            <div >
              <img
                
                src="./assets/images/trash-small.png"
                alt=""
              />
              <h2 >$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 > // <--- added here
          <div >
            <img src="./assets/images/cookie5-small.jpg" alt="" /> // <---image will change depending on item added
            <h3 >$5</h3> // price will change depending on item added..
            <div >
              <div ></div>
              <h3 >2</h3>
              <div ></div>
              <div ></div>
            </div>
            <div >
              <img
                
                src="./assets/images/trash-small.png"
                alt=""
              />
              <h2 >$10</h2>
            </div>
          </div>
        </div> `
  }

Is this something that can be done?

CodePudding user response：

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

CodePudding user response：

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

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

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

CodePudding user response：

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 >
          <div >
            <img src="${this.img}" alt="" />
            <h3 >${this.price}</h3> 
            <div >
              <div ></div>
              <h3 >2</h3>
              <div ></div>
              <div ></div>
            </div>
            <div >
              <img
                
                src="./assets/images/trash-small.png"
                alt=""
              />
              <h2 >$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 >ba continaer:</div>