The Document Object Model is an API which allows developers to access, read, and modify the content of a web page. In this article, Iâ€™m going to show you 10+ extremely useful code snippets to manipulate the DOM using jQuery.
|September 4, 2010||Posted by documentListener under Web Programming||
Add a CSS class to a specific element
A very clean way to change an element look and feel is to add a css class, instead of adding inline styles. Using jQuery, this is pretty easy to do:
Removing a CSS class from a specific element
Itâ€™s great to be able to add some CSS classes, but we also need to know how to remove unwanted classes. The following line of code will do that:
Check if a specific element has a CSS class
If your application or site is frequently adding and removing classes to a particular element, it can be very useful to be able to check out if an element has a certain CSS class.
Switch CSS using jQuery
As we saw with the previous examples, adding or removing css styles to an element is very simple using jQuery. But what if you want to completely remove the document css file and attach a new stylesheet? Good news, it is extremely simple as well, as shown in the following example:
Append HTML to an element
When you need to append some html to an element, the append() method is a life saver:
Check if an element exists
'We found img elements on the page using "img"'
'No img elements found'
Get the parent element of an element
When working with the DOM, you may need to know which element is the direct parent of another element. The closest() method will let you know:
Get element siblings
The siblings() method is a very handy tool to get siblings of an element. As shown below, using this method is extremely simple:
Remove an option from a select list
When working with select lists, you may want to update the content according to the user actions. To remove an option from a select list, the following code will do the trick:
Get the selected option as text
Extremely useful when you need to quickly check out what a visitor selected from your select list.
Apply a â€œzebraâ€ effect on tables
When using tables, it is a good idea, for better readability, to give a different style to one line out of two. Using jQuery, this can be done easily, without any additional html markup.
Count children of an element
If youâ€™d like to count how many div elements are children of #foo, the following line will let you know. Simple and efficient!