0

Задача: посредством jQuery добиться того, чтобы на на одних диапазонах ширин окна div удалялся, на других - добавлялся без потери содержимого.

JavaScript

<script type="text/javascript">

    window.onload = function() {
        window.onresize = insertDiv;
        insertDiv();
    };

function insertDiv(){

    var div = $(".test");   

    var WindowWidth = window.innerWidth;

    if (WindowWidth <= 500){
        $(".test").remove();       
    }
    else{
        $("header").append(div);
    }
}
</script>

HTML:

<header>
    <div class="test"> Рыба </div>
</header>

Строка в блоке else не работает.

Вероятно, я не совсем понимаю, что надо сохранять в значение переменной, а что- удалять. Насколько я сейчас знаю, в переменную div я сохранил массив, которым описывается DOM-объект, а добавлять надо наверное не этот массив, а HTML-код.

Как бы то ни было, какова причина того, что скрипт не работает?

Полные исходники здесь (понадобится локальный сервер, т. к. я сохранил php-структуру своего исходного кода).

13
  • Зачем удалять если можно прятать (причем без скриптов)? 20 окт 2016 в 5:48
  • Потому что свойство display: none; является конфликтным для поисковой оптимизации. 20 окт 2016 в 5:54
  • Угадал все буквы - не угадал предложение. Поясните в чем конфликт? 20 окт 2016 в 5:56
  • В том, что поисковики занижают в выдаче сайты, в которых используется CSS-свойство display: none;. 20 окт 2016 в 5:58
  • 2
    Откуда такая информация? 20 окт 2016 в 6:00

1 ответ 1

-1

Нужно заменить строку

$("header").append(div);

на

div.clone().appendTo("header");

Блок else не работал, потому что append "вырезает" элемент из прошлого места, и вставляет в новое. Если же нам необходимо не переместить элемент, а скопировать, можно воспользоваться методом clone.

1
  • Добавил ссылку на полные исходники. Со своего компа проверил: добавления div не происходт. 20 окт 2016 в 6:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.