Chapter 5. DOM Manipulation—How to Change Your Page on Command
Something’s changed Everything’s rearranged | ||
-- Devo, “Let’s Talk” |
Like a magician who appears to produce a bouquet of flowers out of thin air, jQuery can create elements, attributes, and text in a web page—as if by magic. But wait, there’s more! With jQuery, we can also make any of these things vanish. And, we can take that bouquet of flowers and transform it into a <div class="magic" id="flowers-to-dove">dove</div>
.
Manipulating Attributes
Throughout the first four chapters of this book, we have been using the .addClass()
and .removeClass()
methods to demonstrate how we can change the appearance of elements on a page. Effectively, what these two methods are doing is manipulating the class
attribute (or, in DOM scripting parlance, the className
property). The .addClass()
method creates or adds to the attribute, while .removeClass()
deletes or shortens it. Add to these the .toggleClass()
method, which alternates...