How to load content in a single page web app
Hello guys, sorry to disturb you all. I need to load content in a single page web app. From what I have read and seen, there are 2 ways of doing it (using vanilla JS)... one way is to inject the html content directly into div containers while the other is just to shift from display block to display none when needed.
I don't understand, is there a difference here? I need to use history API, to keep track of the changes, like pages we are navigating through, it's more appropriate to inject html content directly here rather than div element?
3 Replies
The strategy of unhiding content requires knowing in advance what that content is. Creating elements and text nodes and appending them to the document can be done without any advanced knowledge of the content.
Both strategies can be used on the same site. Consider the situation of a navigation menu that is hidden until a button is pressed. The menu items are already known in advance, so you can just hide and unhide. If this same site has a chat section where people can type messages, there is no way to know in advance what somebody is going to type, so you can't have that pre-rendered waiting to be unhidden later.
There are situations in which you may want to render the items even if they are knowable in advance. This can be done for performance. Hidden items use memory and may affect JS execution time for certain operations.
Oh okay I see... consider a website where we can upload... we don t know.in advance how many images there are, definitely here we should inject the html right ?
Correct.