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

Question

我是一名 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");
}

    

有了这个，我想拥有一个容器并创建许多位于该容器中的卡片。我正在使用构造函数来稍后生成单独的卡片。

非常感谢，精明

标签： javascriptdomjavascript-objects

Answer 1

我宁愿使用新的类语法。

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)