Как загрузить другой HTML на основе window.width()?

Question

Как всегда слушать window.width() и загружать разные коды HTML на основе значений ширины? Я использую window.width() и replaceWith().

Работает только при открытии страницы и не работает при изменении размера моего окна браузера.

Мой код внутри моего HTML файла:

var width; 
    $(window).resize(function() { 
     width = $(window).width(); 
     if (width < 768) { 
      $("#the_dropdown").replaceWith("<p>Less than 768</p>"); 
     } else { 
      $("#the_dropdown").replaceWith("<p> More than 768</p>"); 
     } 
    }); 
    $(window).trigger('resize'); 

Demo

Другой вопрос, делает replaceWith() подходит для ситуации, которая включает в себя длинные HTML коды (более 1 строки)?

Я уже сделал несколько наборов кодов HTML, основанных на определенной ширине окна, и я хочу поместить его в мой div #the_dropdown.

Answer 1

Ваш код не работает, потому что replaceWith() заменяет выбранный элемент. В вашем случае элемент с id #the_dropdown. Поэтому при следующем триггере этот элемент не найден и текст не написан.

Заменить replaceWith() на .html().

Demo