DOM Traversal/Operations Functions

From time to time we have jQuery objects that reference a set of Document Object Model (DOM) of JavaScript elements already, but we need to perform an action on a different, related set of elements. So DOM traversal techniques are useful. For example:

this.toggleClass('arrow-down')
.next()
.slideToggle('fast');

Judgment of elements is not enough but we want to be able to alter them as well. Such changes can be as straightforward as changing a single attribute.

$chapterTitle.attr('id', chapterId);

Here we modify the ID of the matched element on the fly.
every so often the changes are further-reaching:

$('<div id="page-contents"></div>')
.prepend('<a class="toggler" href="#">Page Contents</a>')
.append('<div></div>')
.prependTo('body');

This part of the script illustrates that the DOM manipulation process can not only alter elements in place but also remove, shuffle, and insert them.