Create a new item with JS or just show a hidden with CSS?


Are there advantages to using this:

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

$( target ).after( newElement );

over simply hiding the newElement div with CSS and displaying it when you need it? I understand you couldn't do this with dynamic content like a user adding items to a list, but if you know that an element will be revealed at some point, can't you simply use CSS to show the pre-hidden div?

Displaying a div with CSS for simply revealing more information is obviously better, but what about more complex things, like revealing new items and sections in a game?

depending on your intended purpose (possibly a game) CSS is generally going to be better in a normal website because it requires less than JS in terms of time from the users perspective (depending of course on the content).

If it is a game where you don't want that data visible at all for cheating reasons, then you will want it to be dynamic. In this fashion you could employ a combination of both strategies by using CSS to hide the container and JS to fill the container with the intended content.