Странность в классах (начинающий)

[Иса Мирзоев]

Приветствую. Изучаю классы. Почему-то не могу создать более 1 константы для вывода данных итоговых. Ошибки в консоли нет. Мне собственно нужно, что можно было сколько угодно этих констант создать верно отображаемых.

Мой код

class RootElement{
    constructor(tagName = "div"){
        this.$el = document.querySelector(tagName)
    }
    append(){
        document.querySelector(".wrapper").insertAdjacentElement("afterbegin", this.$el)
    }
}

class Box extends RootElement{
    constructor(color,size = 150,tagName){
        super(tagName)
        this.color = color
        this.size = size
    }
    create(){
        this.$el.style.background = this.color
        this.$el.style.width = this.$el.style.height = `${this.size}px`
        this.$el.append()
        return this
    }
}

const yellowBox = new Box("yellow", 150, "div").create()
const greenBox = new Box("green", 100, "div").create()

HTML-код содержит только минимальную разметку + класс wrapper.

Одна константа на странице отображается, вторая и любые прочие - нет. Подскажите, пожалуйста, что я делаю не так? Спасибо заранее.

[Malleys]

<div class="wrapper"></div>

<script>

class RootElement {
	constructor(tagName = "div") {
		this.element = document.createElement(tagName);
	}
	append(element = document.body) {
		element.appendCild(this.element);
	}
}

class Box extends RootElement {
	constructor(color, size = 150, tagName) {
		super(tagName);
		this.color = color;
		this.size = size;
		
		this.create();
	}
	create() {
		this.element.style.background = this.color;
		this.element.style.width = this.element.style.height = `${this.size}px`;
		this.element.append();
		return this;
	}
}

const yellowBox = new Box("yellow", 150, "div");
const greenBox = new Box("green", 100, "div");
document.querySelector(".wrapper").append(yellowBox.element, greenBox.element);
	
</script>

А вообще лучше наследовать от HTMLElement

UPD

<div class="wrapper"></div>

<script>

class RootElement extends HTMLDivElement {
	// то, что вы хотели, уже есть в HTMLDivElement
	// может вы захотите здесь объявить свои методы! 
}

class Box extends RootElement {
	constructor(color, size = 150) {
		super();
		this.color = color;
		this.size = size;
		
		this.style.background = this.color;
		this.style.width = `${this.size}px`;
		this.style.height = `${this.size}px`;
	}
}
customElements.define("custom-box", Box, { extends: "div" });

const yellowBox = new Box("yellow", 150);
const greenBox = new Box("green", 100);
document.querySelector(".wrapper").append(yellowBox, greenBox);
	
</script>

[Иса Мирзоев]

Спасибо, изучу))

[Иса Мирзоев]

<div class="wrapper"></div>

<script>

class RootElement {
	constructor(tagName = "div") {
		this.element = document.createElement(tagName);
	}
	append(element = document.body) {
		element.appendCild(this.element);
	}
}

class Box extends RootElement {
	constructor(color, size = 150, tagName) {
		super(tagName);
		this.color = color;
		this.size = size;
		
		this.create();
	}
	create() {
		this.element.style.background = this.color;
		this.element.style.width = this.element.style.height = `${this.size}px`;
		this.element.append();
		return this;
	}
}

const yellowBox = new Box("yellow", 150, "div");
const greenBox = new Box("green", 100, "div");
document.querySelector(".wrapper").append(yellowBox.element, greenBox.element);
	
</script>

а в чем у меня все-таки проблема была? Чтобы понять механизм)

[рони]

а в чем у меня все-таки проблема была?

вы не создавали элемент, а искали!!!

this.$el = document.querySelector(tagName)

взгляните на эту строку в примерах Malleys,

this.element = document.createElement(tagName);

и не надо копировать сообщения целиком

[Иса Мирзоев]

вы не создавали элемент, а искали!!!

взгляните на эту строку в примерах Malleys,



и не надо копировать сообщения целиком

Спасибо, дошло))