Могу ли я использовать классы для создания / размещения элементов в DOM?

Question

Я хочу создать несколько элементов, задать свойства и поместить их в DOM с помощью vanilla js в удобном для чтения виде.

Теперь я делаю это с обычными функциями, выполняющими все DOM-редактирование, но одно ограничение заключается в том, что мне нужно отслеживать текущий элемент и добавлять его, прежде чем я продолжу и создаю следующий.

Я только начал изучать классы и пытался преобразовать идею в структуру класса, но не могу заставить ее работать.

Каковы лучшие практики здесь? И если классы могли бы сделать это, каков основной код для создания и добавления div?

Ниже приведен мой код (который работает), но я стремлюсь улучшитьлогика

let body = document.querySelector("body");

// keeping track of the current div
let currentDiv;

// create and add attr
function createDiv(){
  let newDiv = document.createElement("div");
  currentDiv = newDiv;
}
function size(el, x, y){
  el.style.height = y;
  el.style.width = x;
}
function paintBG(el, clr){
  el.style.backgroundColor = clr;
}
function append(parent){
  parent.append(currentDiv);
}

// and then run the functions
createDiv();
size(currentDiv, "100%", "100px")
paintBG(currentDiv, "red");
append(body);

Answer 1

Добавьте эти методы к HTMLElement . Ниже приведен небольшой пример.

let body = document.querySelector("body");
//create element with any tag  like create('tagname')
function create(tag){
	return document.createElement('div');
}
//append any number of child like body.append(elm1,elm2,elm3)
HTMLElement.prototype.append = function(...children){
	children.forEach(child => {
		this.appendChild(child);
	})
	return this;
}
//append the element to any other element 
HTMLElement.prototype.appendTo = function(parent){
	parent.appendChild(this);
	return this;
}
//change the size
HTMLElement.prototype.size = function(x,y){
	this.style.height = x;
	this.style.width = y;
	return this;
}
//changes color and background color
HTMLElement.prototype.paint = function(bgColor,textColor){
	this.style.backgroundColor = bgColor;
	if(textColor) this.style.color = textColor;
	return this;
}
let myDiv = create('div').size('100px','100%').paint('blue','black').appendTo(body);

Answer 2

Вы вводите в заблуждение понятия.

Классы в DOM предназначены для группировки элементов, имеющих сходную особенность, чтобы их можно было запрашивать / обновлять в пакетном режиме, а также стилизовать одинаково.

Элемент - это элемент, и его нужно создавать как таковой.

A <div class="header" /> и <span class="header" /> могут совместно использовать класс, но они всегда будут отличными элементами, и, таким образом, выне может создавать их динамически "по классу"

В вашем примере, я бы предложил использовать CSS вместо индивидуальной обработки стилей элементов.