06
Июл
2022

Динамическое создание элементов на странице typesctipr

Всем хай, столкнулся с такой необходимость, динамически создавать элементы на странице не используя html разметку. При помощи typescript. У меня есть стри страницы, которые наследуются от абстрактного класса

пример

abstract class Template {
  protected container: HTMLElement;
  static content = {};

  protected constructor(id: string, classNames?: string) {
    this.container = document.createElement('main');
    if (typeof classNames === 'string') {
      this.container.classList.add(classNames);
    }
    this.container.id = id;
  }

  protected header(content: string) {
    const title = document.createElement('h1');
    title.innerText = content;
    return title;
  }

  render() {
    return this.container;
  }
}
class ErrorPage extends Template {
  private readonly errorType: ErrorTypes | string;

  static content: { [key: string]: string } = {
    '404': 'Error! Page not found...',
  };

  constructor(id: string, errorType: ErrorTypes | string, className: string) {
    super(id);
    this.errorType = errorType;
    this.container.classList.add(className);
  }

  render() {
    const title = this.header(ErrorPage.content[this.errorType]);
    title.classList.add(style.error);
    this.container.append(title);
    return this.container;
  }
}

Так вот при создании основной страницы, возникла необходимость более быстрого создания элементов нежели

const a = document.createElement('a')
document.body.appent(a)
const b = document.createElement('img')
???

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

type ParentNode = HTMLElement | Create;

type ElementNode = HTMLElement;

class Create {
  protected element: HTMLElement;

  constructor(parent: ParentNode, tag: string, classNames: string, value?: string, attr?: Record<string, unknown>) {
    this.element = document.createElement(tag);
    this.element.classList.add(...classNames.split(' '));
    if (typeof value === 'string') {
      this.element.innerHTML = value;
    }
    if ('appendChild' in parent) {
      parent.appendChild(this.element);
    }
    if (attr) {
      for (const key in attr) {
        this.element.setAttribute(key, <string>attr[key]);
      }
    }
  }

  append(element: ElementNode) {
    this.element.append(element);
  }
}

const wrapper = new Create(document.body, 'div', '123', '123');
const ne = new Create(wrapper, 'div', 's');
const asd = new Create(ne, 'div', '123');
asd.append(wrapper);

Источник: https://ru.stackoverflow.com/questions/1427320/%D0%94%D0%B8%D0%BD%D0%B0%D0%BC%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D0%BD%D0%B0-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B5-typesctipr

Тебе может это понравится...

Добавить комментарий