Hiding content vs. setting the InnerHTML of the content's parent container to " "

To my understanding it depends on the source of the element your hiding.

For example if the item to be hidden was originally contained in the HTML then as a result of loading order, generally the HTML fully loads before the JS is even run. Hiding this element wouldn't affect loading time. As its still going to be loaded into the page before the JS hides it.

This process is thoroughly equivalent to a CSS function of display:none of the given item.

Bare in mind that users who do not use JS when browsing will not have this elements hidden if they are include in the source HTML anyway.

If the item is not needed deleting it will speed up load times proportionally to the size of the object being removed.

Again the setting innerHTML would have the same issues as the object is likely to have been loaded into the page anyway before the html is then stripped.

Either way probably has same speed. Although the innerHTML idea is more destructive as your actually removing content from the page and makes it harder to simply show() the object later on.

Hope that helps?

I haven't complete the course yet but the css transitions and transoformations course might offer the functionality you want here?

https://teamtreehouse.com/library/css-transitions-and-transforms

could delay the reveal of the float menu by a fixed amount of time and even add an effect too it. This would allow you to leave the HTML as it is so any visitors to your site who has js disabled would still be able to access the menu too.