Не может обернуть структуру HTML вокруг элемента

Question

Я хочу взять все элементы с тегом table и обернуть вокруг него структуру HTML, чтобы таблицы стали адаптивными, но по какой-то причине он не работает. Подскажите, пожалуйста, что я делаю не так и почему он не работает?

AfterContentChecked() {
    this.el = document.getElementsByTagName('table');
    this.wrapper = document.createElement('div.table-responsive');
    this.el.parentNode.insertBefore(this.wrapper, this.el);
    this.wrapper.appendChild(this.el);
  }

Answer 1

ngAfterContentChecked() {
    const el = document.getElementsByTagName('table');
    this.doItOnce = true;
    if (el.length && this.doItOnce) {
      this.doItOnce = !this.doItOnce;
      for (let i = 0; i < el.length; i++) {
        const element = el.item(i);
        const wrapper = document.createElement('div');
        wrapper.className = 'table-responsive';
        element.parentNode.insertBefore(wrapper, element);
        wrapper.appendChild(element);
      }
    }
  }

Answer 2

Прежде всего, это не AfterContentChecked. Значение должно быть ngAfterContentChecked. Но используйте ngAfterViewInit ловушку жизненного цикла вместо ngAfterContentChecked для вашей реализации. Добавьте id свойство к table и используйте getElementById вместо getElementsByTagName. Не устанавливайте table-responsive класс сразу. Сначала создайте элемент div, затем добавьте class.

HTML

<div>
  <table id="table" class="table">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sudarshana</td>
          <td>Sri Lanka</td>
        </tr>
      </tbody>
    </table>
</div>

TS

  ngAfterViewInit() {
    this.el = document.getElementById('table');
    this.wrapper = document.createElement('div');
    this.wrapper.classList.add('table-responsive');
    this.el.parentNode.insertBefore(this.wrapper, this.el);
    this.wrapper.appendChild(this.el);
  }

Демонстрация StackBlitz