DOM Manipulation—How to Change Your Page on Command | Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

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...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Overview of this book

Chapter 5. DOM Manipulation—How to Change Your Page on Command

Manipulating Attributes

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access