Consideration that should be taken before modifying element on a page using jQuery

JavaScript
1

Hi,

I think I will ask the obvious but I wan to hear it form the experts. I have been trying to learn JavaScript and most recently jQuery. After playing with some cool stuff like hiding, showing, animating etc… html elements I started wondering if when doing this you should do it thinking about how your layout and be careful not to break it since I noticed that when for instance if you hide a div it actually takes it out of the normal flow and if this div is part of the layout structure it could potentially break it.

Is it a common practice to think about the layout when using JavaScript/jQuery to play with elements or objects on a page?

Is this the first think before making any modification to any element that could affect the layout or is there something that I’m not aware of to prevent from taken these elements out of the normal flow?

Sorry if my question doesn’t make too much sense!

2

There is nothing that prevents you from hiding, animating, etc. crucial elements in your page’s DOM. These decisions are left up to you. As a note, these elements are still present within the page—unless you explicitly delete them—so you can always restore them need be; for example, hide x until the user does y.

Therefore, it is crucial to think of any consequences of DOM modification when laying out a page’s markup. For example, it may require wrapping elements to hide children elements, whilst preserving the dimensions of the parent element, so as not to break the layout.

I hope that this helps.

3

That’s the answer I was looking for! Thanks a lot for your help!