Manipulating DOM Elements in jQuery
This chapter is from the book
This chapter is from the book
This chapter is from the book
Adding, changing, and removing elements from your web pages based on user interactions is one of the coolest things you can do with jQuery. The library is deep, with lots of functions you can apply to your web pages to achieve dramatic effects.
In many of the exercises prior to this chapter, you’ve used the css() method to create styles on the fly. In this chapter, you’ll take it a couple of steps further using CSS height, width, and position properties. You’ve also used the html() method to add error messages when form elements were not filled out correctly. You’ll explore using html() further while employing some custom HTML attributes.
The DOM manipulators don’t stop there. You’ll learn how to copy, add, change, and remove DOM elements to enhance your website visitors’ experience. Let’s get started!
Inserting Elements
You’ll find there are times when you need to add and remove elements from your web pages. The jQuery library provides a number of methods for performing these manipulations, allowing you a great deal of flexibility when creating specific interactions (see Table 4.1).
Table 4.1. DOM Insertion Manipulators
|
Method |
Use It To... |
|
after() |
Insert content after each of the selected elements. |
|
insertAfter() |
Perform the same action as after(); requires a different syntax. |
|
append() |
Insert content at the end of each selected element. |
|
appendTo() |
Perform the same task as append(), but the syntax is flipped. |
|
prepend() |
Insert content at the beginning of each selected element. |
|
prependTo() |
Perform the same task as prepend(), but the syntax is reversed. |
|
before() |
Insert content before each of the selected elements. |
|
insertBefore() |
Perform the same action as before(), but the syntax is flipped. |
|
clone() |
Create a deep copy (copies all of the descendants) of the set of selected elements. |
|
detach() |
Remove the set of matched elements from the DOM and keep the data for later reinsertion. |
|
empty() |
Remove all child nodes of the set of selected elements from the DOM. |
|
remove() |
Remove the set of selected elements from the DOM. |
|
removeAttr() |
Remove an attribute from each of the selected elements. |
|
replaceAll() |
Replace each target element with the set of selected elements. |
|
replaceWith() |
Replace each element in the set of selected elements with new content. |
|
wrap() |
Wrap an HTML structure around each element in the set of selected elements. |
|
unwrap() |
Remove the parents of the set of selected elements from the DOM. |
|
wrapAll() |
Wrap an HTML structure around all elements in the set of selected elements. |
|
wrapInner() |
Wrap an HTML structure around the content of each element in the set of selected elements. |
Of special note are the methods that perform the same function but use a different syntax. Take, for example, before() and insertBefore(). Both allow you to place content into your page in the same way but with the syntax flipped:
$('element')
.before('<p>before element</p>');
$('<p>before element</p>')
.insertBefore('element');
The paragraph containing “before element” will be inserted before “element” in either case—the choice for you is a stylistic one. Many say using insertBefore() is more easily read because it reads left to right and is easier to understand. On the other hand, many like the syntax of the first example even if it’s another case where jQuery sounds a little like Yoda. Methods that perform the same task are pointed out in their descriptions.