Как отменить изменения в DOM сделанные на js?

Question

[Денис Клепко]

Здравствуйте!
Имею следующую проблему.
Есть меню на сайте, сложное многоуровневое. На js + jquery оно переписывается под разные размеры экранов . Переписывается много чего, добавляются новые классы, html-блоки и тд.
Недостаток: при изменении размера экрана нужно перезагружать страницу.
Проблемам в том, что при уменьшении экрана (ресайзом) меню переписывается с декстопной версии на мобильную, а если с мобильной на декстопную нужно все как-то отменить. Не переписывать же все скприты в обратном порядке...
Есть варианты как это сделать?

Answer 1

[Сергей Соколов]

Ситуация выглядит как-то неправильно. Обычно либо стилями добиваются разного отображения на разных дисплеях – посмотрите, к примеру, Bootstrap – либо делают вообще отдельную разметку для мобилок и десктопов на разных поддоменах.

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

Ещё можно держать исходную разметку в невидимом теге <script type="template" id="sourceCode">. Скриптом копировать её оттуда, применять изменения и вставлять в DOM. При изменении размера, снова доставать нетронутую исходную разметку и переделывать под другую ширину.

Comments

[Денис Клепко]

Спасибо за идею. Попробую.

Answer 2

[Alexander Litvinenko]

Так недолжно быть, это проблема архитектуры. Чисто теоретически можно скопировать часть DOM до изменения а потом востановить, но это абсолютно неправильно.