Как создать новый элемент по ресайзу окна?

Question

[nen0y]

Когда ширина окна становиться < 991px, то должен создастся тэг с классом .title, как это сделать?

Answer 1

[Никита Михайлов]

Проще всего это решить без помощи JS. Вы можете создать блок, который изначально скрыт. Используя медиа-запросы при ширине < 991px давать ему новое значение свойства display.

<style>
  .hide {
    display: none;
  }

  @media screen and (max-width: 991px) {
    .show-md {
      display: block;
    }
  }
</style>

<div class="title hide show-md"></div>

Если нужен именно JS, то используйте matchMedia

Answer 2

[Tim]

примерно так

let flag = true;
window.addEventListener('resize', ({ target }) => {
    if (flag && target.innerWidth < 991) {
        gettag();
        flag = false;
    } else if (!flag  && target.innerWidth > 991) {
        flag = true
    }
}, false);

function gettag() {
    let tag = document.createElement('div');
    tag.className = 'title';
    //нужные операции делаем. например вывод на страницу
    console.log(tag)
    return tag;
}