JQuery append как переместить блок при изменении ширины экрана?

Question

[Evirel]

Помогите, пожалуйста, разобраться. Мне нужно переместить блок "контакты". Если ширина > 768, то переместить блок в .contactsBlock, иначе переместить блок в nav. Почему-то сейчас при изменении ширины экрана дублируется блок 4 раза.

jQuery(window).on('resize', function(){
  let width = window.innerWidth;
  if (width > 768) {    
    jQuery('.contacts').css('display', 'flex');
    jQuery('.contactsBlock').append(jQuery('.contacts'));
  }
  if (width < 768) {
    jQuery('.contacts').css('display', 'block');
    jQuery('nav').append(jQuery('.contacts'));
  } 
});

Comments

[iBird Rose]

чем так костылять, я бы на твоем месте просто продублировал его в оба места и через css media показывал тот блок, который должен показываться.

[Evirel]

возможно и так, но через js нормально работало( к сожалению необходимо использовать jquery

Answer 1

[ildar-meyker]

Вам дали верный совет по поводу дублирования элементов. Изменение DOM -- дорогая операция. И лучше ее избегать. Но если очень нужно, то вот.

https://codepen.io/ildar-meyker/pen/zYPqPMr