Creating a new element with JS or simply displaying a hidden one with CSS?

Question

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?

Answer 1

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.

Answer 2

More complex things will typically have an AJAX call behind it to fetch those new items (for instance). These AJAX calls have success callbacks which can manipulate the DOM how you want.