HTML fragments

Here we will look at some small optimizations in the code that creates the sprites. As this function is called only eight times in our entire game and only during the initialization phase, it's not very important that it's fast in this case. However, there are many situations where you need to create lots of sprites during the game, for example, when shooting lasers in a shoot-'em-up when creating levels of a platformer or the maps of an RPG.

This technique avoids parsing the HTML code (that describes a sprite) each time that you add one to the game. It uses what's called an HTML fragment, which is a kind of a severed branch from the usual HTML tree of nodes.

jQuery offers a very simple way to generate such a fragment:

var fragment = $("<div>fragment</div>");

In this example, the variable fragment will hold the HTML element in memory until we need to use it. It is not automatically added to the document. If you want to add it later you can simply write:

$("#myDiv"...