By now, we are used to getting and setting values that are associated with DOM elements. We have done this with simple methods such as .attr(), .prop(), and .css(), convenient shorthands such as .addClass(), .css(), and .val(), and complex bundles of behavior such as .animate(). Even the simple methods, though, do quite a bit of work for us behind the scenes. We can get even more utility out of them if we better understand what they do.
We often create new elements in our jQuery code by providing an HTML string to the $() function or to DOM insertion functions. For example, we create a large HTML fragment in Listing 12.9 in order to produce many DOM elements. This technique is fast and concise. There are circumstances when it is not ideal. We might, for instance, want to escape special characters from text before it is used, or apply style rules that are browser-dependent. In these cases, we can create the element and...