Классы в JS ES6 и строковые шаблоны

Question

Хочу создать класс который будет искать селектор в разметке, потом туда подставлять мой шаблон в разметку. Пока есть вот так:

class Modal {
  constructor(obj) { 
    this.$el = document.querySelector(obj.selector)
  }

  init() {
    console.log(`<h2 class="modal__title">${this.title}</h2>`)
  }
}

const Box1 = new Modal({
  selector: '.modal_wrapper'
})

Вначале, просто хотелось понять, как добавить в разметку хоть один заголовок. Но я уже подвис на вот этом моменте. Не пойму, как сейчас действовать, класс я нахожу. Метод init я пока просто пытаюсь вывести в консоль

Но нужно сделать appendChild как-то в найденный selector. И как в шаблоне заменить title На свое название заголовка((

Все что находил по 'гуглежу' - это примеры на пальцах, которые не выходить натянуть на мой пример)))

Answer 1

class Modal {
  constructor(obj) { 
    this.$el = document.querySelector(obj.selector) || document.body;
    this.title = obj.title || "Default Title";
  }

  init() {
    this.$el.insertAdjacentHTML("afterbegin",
      `<h2 class="modal__title">${this.title}</h2>`);
    /*
    let h2 = document.createElement("h2");
    h2.className = "modal__title";
    h2.textContent = this.title;
    this.$el.appendChild(h2);
    */
  }
}

const box1 = new Modal({
  selector: '.modal_wrapper'
});
box1.init();

<div class="modal_wrapper"></div>

БЛОГ НА HUSL

Классы в JS ES6 и строковые шаблоны

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