Manipulating the DOM

While creating a game with jQuery, you will spend quite some time adding and removing nodes to the DOM. For example, you could create new enemies or remove dead ones. In the next section we'll cover the functions you will be using and we will also see how they work.

.append()

This function allows you to add a child to the currently selected element (or elements). It takes as argument some already existing DOM element, a string containing HTML code that describes an element (or a whole hierarchy of elements), or a jQuery element selecting some nodes. For example, if you wanted to add a child to a node with the ID "content", you would write:

$("#content").append("<div>This is a new div!</div>");

Keep in mind that if you give a string to this function, the content will have to be parsed and that this could have some performance issues if you do it too often or for very large strings.

.prepend()

This function works exactly like .append(), but adds the new content before the first child of the selected element instead of after its last one.

.html()

This function allows you to completely replace the content of the selected node(s) with the string passed as an argument. If called without an argument, it will return the current HTML content of the first of the selected elements.

If you call it with an empty string, you will erase all the content of the nodes. This could also be achieved by calling .empty().

.remove()

This function will simply delete all the selected elements and unregister all the associated event handlers and data.

.detach()

In some situations, you may only want to remove some content for a short period of time and add it again later. This is typically a case where .remove() does too much of a good job. What you really want is to keep all those other things you associated with your nodes so that when they get added later on, they will work exactly like before. .detach() has been created exactly for this situation. It will behave like .remove(), but will allow you to reinsert your elements easily.