Как с помощью классов создать html-элемент и вставить на страницу?

Question

Например, нужно создать input разного типа (email, password, text) и вставить на страницу. Я так понимаю один метод на определенный тип нужно делать. Что в конструктор писать?

class Input {
  constructor() {
    ///
  }
  createPassInput() {
    //
  }
createEmailInput() {
    //
  }
createTextInput() {
    //
  }
}

let inputpass = new Input("input");
inputpass.createPassInput()

Answer 1

Для каждого тега создавать отдельный класс? Сомнительная идея. Не удобнее ли пользоваться new Elem("input", {type: "password", placeholder: "moo"}); примерно такими вызовами? Можно всё передавать в виде параметров.

Собственно, как и тип инпута, в вашем случае:

class Input {
  constructor(type) {
    this.elem = document.createElement("input");
    if (type) this.elem.type = type;
  }
  
  appendTo(parent) {
    parent.appendChild(this.elem);
  }
}

new Input("number").appendTo(document.body);
new Input("checkbox").appendTo(document.body);
new Input("password").appendTo(document.body);

По разному можно фантазировать на эту тему, например:

let input = create("input", {type: "password", placeholder: "moo"});
let div = create("div", {class: "bubu"}, {children: [input]});

document.body.appendChild(div);
document.body.appendChild( create("div", {class: "bubu"}, {text: "bubu"}) );

/***/
function create(tagName, attributes, contents) {
  let elem = document.createElement(tagName);
  
  if (contents) {
    if (contents.children) {
      contents.children.forEach(el => elem.appendChild(el));
    } else if (contents.text) {
      elem.textContent = contents.text;
    }
  }
  
  if (!attributes) return elem;
  
  for (let [attr, value] of Object.entries(attributes) ) {
    elem.setAttribute(attr, value);
  }
  
  return elem;
}

.bubu { border: 2px solid orange; padding: 4px; margin: 4px; }

Если хочется в виде класса: Как-раз домашнее задание!)

P.s. При этом, спорно, что все эти телодвижения будут лучше, чем банально собирать HTML из строки. Но "набить руку" и попробовать как вариант - вполне годятся.

БЛОГ НА HUSL

Как с помощью классов создать html-элемент и вставить на страницу?

Ответы (1 шт):