If you’ve been reading my jQuery series of posts sequentially, then you saw [intlink id=”110″ type=”post”]how to incorporate jQuery into an HTML page[/intlink], learned [intlink id=”248″ type=”post”]how to select elements[/intlink] so that you can use or manipulate them, grasped [intlink id=”261″ type=”post”]how to add event handlers[/intlink], and saw [intlink id=”298″ type=”post”]some of the effects[/intlink] that can easily be applied. In this post, I discuss other ways you can manipulate document elements: by altering their CSS, changing their values and attributes, and by adding or removing elements. Although these techniques have an affect on the visual page, I’ve grouped them together here (separate from the effects post) as they’re all primarily about delivering content.I’ve already discussed the addClass() and removeClass() methods a couple of times now. The former adds a CSS class to an element; the latter removes it. You can also use the css() method to get an element’s property: $(‘#something’).css(‘font-weight’). Or you can use the css() method to add specific style rules: $(‘p’).css(‘color’, ‘#ccc’).
You can alter the size of an element using height() and width(). If called with an argument, that value will be the element’s new height or width accordingly. If either method is called without an argument, the element’s height or width is returned.
For more on the above methods, see jQuery’s documentation for CSS.
A few very important methods I have yet to discuss come under jQuery’s attributes category.These are html(), text(), and val(). Each of these can retrieve or set an element’s HTML, text, or value. For example, html() will return the innerHTML value of an element, or if provided with an argument, will update that element’s innerHTML. The text() method is used the same way for an element’s text value. In other words, html() can get and set HTML; text() can only get and set text. The val() method gets or sets the value of an element, like form elements.
Say you have two form inputs—firstName and lastName. You can combine what the user enters there and place it in another element, like an paragraph greeting:
var name = $('#firstName').val() + ' ' + $('#lastName').val();
$('#greeting').html('Hello, <span class="bold">' + name + '</span>');
Then there’s the attr() method, short for attribute, can be used to retrieve or apply an attribute to an element. To get a specific link’s URL, you would use $(‘#somelink’).attr(‘href’). To change every image so that it doesn’t have a border, that’d be $(‘img’).attr(‘border’, ‘0’). Or, as a very useful example, to disable a submit button after a form submission (to prevent duplicate submissions), use: $(‘#submit’).attr(‘disabled’, ‘disabled’).
The last topic to discuss in this post is DOM manipulation through adding, moving, or removing elements. The append() method adds content to the end of an element; prepend() adds content to the beginning of it. Note that both methods add the content “inside” of the element. So this example add two strings within the paragraph tags: $(‘#someP’).append(‘This is at the end.’).prepend(‘This is at the beginning.’). Both methods have a corresponding *To() method—appendTo() and prependTo()—for situations where you want to create new content, then choose the existing element to which the new content should be added.
The corollaries to append() and prepend() are after() and before(). These methods add the new content outside of the selected element. The insertAfter() and insertBefore() work like appendTo() and prependTo(), but again are applied outside of the existing element.
Next up are a series of methods for wrapping elements. For example, if you want to wrap all paragraphs in a DIV: $(‘p’).wrap(‘<div class=”content”></div>’). There are variations on this method; see the jQuery documentation for more.
Finally, there’s the replaceWith() method, for replacing an element with something else, like replacing all unordered lists with ordered lists. The empty() method gets rid of an elements children (aka subelements) and remove() gets rid of the element itself, plus its children.
So that’s an overview of how you can manipulate DOM elements. I didn’t rough out an example for these but I can if you think further clarification is necessary. In my next post, I’ll talk about making Ajax requests using jQuery.
