如何将 div 链接到 JavaScript 生成的 HTML 中的一个容器？

Question

I'm a JavaScript beginner and right now I'm trying to generate HTML with JavaScript. I'm able to code constructors for the container and div but having troubles to link the divs with one container. I know that there is something like appendChild but I can't get it to work in a object orientated fashion. Here is what I'm working on:

    const body = document.querySelector("body");
    const div = document.querySelector("div");
    
    
    function Container () {
        container = document.createElement("div");
        body.appendChild(container);
        container.classList.add("cardContainer");
    }

    function Card () {

    let card = document.createElement("div");
    card.classList.add("card");
    container.appendChild("card");

    let cardPic = document.createElement("div");
    card.appendChild(cardPic);
    cardPic.classList.add("picture");

    let cardTitle = document.createElement("div");
    card.appendChild(cardTitle);
    cardTitle.classList.add("title");

    let cardDesc = document.createElement("div");
    card.appendChild(cardDesc);
    cardDesc.classList.add("desc");
}

    

With this I want to have ONE container and create many cards which sit in that container. I'm using a constructor to have the possibility to generate individual cards later.

Many thanks, canny

Answer 1

I would rather use new class syntax.

class Container {
  constructor() {
    this.container = document.createElement("div");
    body.appendChild(container);
    container.classList.add("cardContainer");
  }

  addChild(node) {
    this.container.appendChild(node)
  }
}

// usage
const container = new Container()
container.addChild(card)