(^116) ❘ CHAPTER 4 MANIPULATING CONTENT AND ATTRIBUTES
FIGURE 4-13
In the preceding example, you can see that the <thead> and <tfoot> elements contained
within the hidden (using the display: none; CSS declaration) <table> element with id name
seventiesAlbumsTemplate are duplicated to the other two <table> elements using jQuery. You
start the script with the logic reversed; that is to say, you do the opposite of what you did with the
before() and after() methods, where you fi rst selected the element that you wanted to insert con-
tent beside and then provided the content to be inserted beside the selected element(s) within the
before() or after() methods. This time, you begin with a selection of existing content within the
document that you want to insert beside another element. In the script, you have the following:$('table#seventiesAlbumsTemplate thead')
.insertBefore('table.seventiesAlbums tbody');The preceding line begins with selecting the <thead> element contained in the <table> with id name
seventiesAlbumsTemplate. You want to duplicate that <thead> element to the other two tables and
use that content as a template. To do that, you call the insertBefore() method and then pass a selec-
tor to that method. The selector that you pass is the element before which you want the original
selection, <thead>, to be inserted. The selector fi rst references <table> elements with the class name