Task: using jQuery to ensure that on some ranges of widths a div window is deleted, on others it is added without loss of content.

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>

The string in the else block does not work.

Probably, I do not quite understand what needs to be saved to the value of a variable, but what to delete. As far as I know now, I saved an array into the variable div , which describes the DOM object, and it’s probably not necessary to add this array, but HTML code.

Be that as it may, what is the reason that the script is not working?

Full source code here (you will need a local server, since I saved the php structure of my source code).

  • Why remove if you can hide (and without scripts)? - tutankhamun
  • Because the display: none; property display: none; is conflicting for search engine optimization. - Lateral Gleb
  • I guess all the letters - did not guess the sentence. Explain what the conflict? - tutankhamun
  • In the fact that search engines underestimate in the issuance of sites that use the display: none; CSS property display: none; . - Hokov Gleb
  • 2
    Where does this information come from? - tutankhamun

1 answer 1

Need to replace the string

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

on

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

The else block did not work, because append "cuts out" an element from the previous place, and inserts it into a new one. If we need not to move an element, but to copy it, we can use the clone method.

  • Added a link to the full source. From my computer checked: adding div does not occur. - Hokov Gleb