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

问题描述

我是JavaScript初学者，现在我正尝试使用JavaScript生成HTML。我能够为容器和div编写构造函数，但是在将div与一个容器链接时遇到麻烦。我知道有诸如appendChild之类的东西，但是我无法使其以面向对象的方式工作。这是我正在从事的工作：

    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");
}

    

为此，我想要一个容器并创建许多卡放在该容器中。 我正在使用构造函数，以便以后可以生成单个卡。

非常感谢， 精明的

解决方法

我宁愿使用新的类语法。

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)