如何解决如何将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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。