Как откатить insertBefore() для десктопа используя window.matchMedia?

Question

[AnnaUniq]

Друзья! Вот код

function innerWidthheadline(w) {
      if (w.matches) { 
        jQuery('#main .banner .title h1').insertBefore('#main .mobile-categories');  
        console.log(true);
      } else {
        return false; 
      }
    }

    var w = window.matchMedia('(max-width: 768px)')
    innerWidthheadline(w)
    w.addListener(innerWidthheadline)

Суть работы: менее 768 ширины, заголовок перемещается из области баннера под шапку
скрин pix.my/BNyg6T
Все хорошо срабатывает при уменьшении разрешения, но если обратно сделать ширину более 768 происходит вот что
скрин pix.my/IxcTxY
Дело в том, что заголовок обязан при увеличении обратно перемещаться в блок из которого мы его перемести, т.е. как мне отменить insertBefore()?
с перезагрузкой страницы все работает, но мне необходимо, чтобы он работал без перезагрузки
Заранее спасибо!

Comments

[Kovalsky]

Чаще всего в таких случаях делают копию блока, которая показывается только при значениях ниже брейкпоинта.

[AnnaUniq]

Никита Полевой, я в курсе, только такой вариант не подходит, это заголовок h1 и дублировать его нельзя

[Kovalsky]

AnnaUniq, если это заголовок для всего документа, то тогда было бы логично использовать два стилизованных под заголовок элемента один из которых обернут в h1. Тогда всё можно было бы решить через CSS.

Также можете дублировать h1 с помощью JS при загрузке.

Если очень хочется именно на JS всё сделать, то можно например при загрузке сохранить ссылку на этот элемент, а при проверке условия вставлять этот элемент в какое-либо из желаемых мест, в зависимости от результата проверки.

[AnnaUniq]

Никита Полевой, проблема в том, что оно должно работать без перезагрузки страницы (с перезагрузкой все пашет), короче отменить в else работу insertBefore()

[Kovalsky]

AnnaUniq, все предложенные мною варианты это учитывают, спрашивайте если что-то не поняли.

Answer 1

[AnnaUniq]

Решение задачи

var title = jQuery('#main .banner .title h1');
    function innerWidthheadline(w) {
      if (w.matches) { 
        title.insertBefore('#main .mobile-categories');  
      } else {
         title.remove();
         jQuery("#main .banner .title").append(title);
      }
    }

    var w = window.matchMedia('(max-width: 768px)')
    innerWidthheadline(w)
    w.addListener(innerWidthheadline)

Я думаю это решение не очень верное в плане дальнейшей реализации более сложных вещей, но для новичков пойдет