Manipulation in jQuery
So far you should have read/watched:
So you know the very basics of jQuery, and multiple ways to select the HTML element that you want to manipulate. In this tutorial i’ll show you how to manipulate that element after you have selected it; changing the contents, changing the HTML and getting values. I won’t be showing you slides/effects , that’ll be in a tutorial coming up.
I will be using the HTML example from the selectors tutorial, and ill only be calling on cells by using their id – im focusing on the manipulation rather than the selecting. Anywho, lets get into it. First the HTML code we’ll be manipulating.
| One | Two | Three | Four | Five |
Ok, say we want to change the text value of a column. We can do this using text() . Take note that text does not parse HTML, it keeps it as plain text.
$("#3").text("wowow");
This changes the value of the #3 td to wowow
What if we wanted to put some HTML in their, mayby make some text bold? We use the html function, very much alike the text function except that it parses the HTML. So the text “cool this is bold” is bolded.
$("#2").html("cool this is bold");
Lets say we wanted to get rid of it completely, so no one could see it. For that we would use the remove function. It does what it says.. it just removes it.
$("#3").remove();
What if you wanted to keep the current text or HTML code in and element but simply add some text at the beginning or end. We would use append or prepend .These keep the contents of what ever is inside the element but will add a small bit of text at either the start or end of the element. append adds it at the start, prepend adds it onto the end.
$("#4").append("hoola hoops");
So the output of that would be Four Hoola Hoops
$("#4").prepend("hoola hoops");
The output of that would be hoola hoops Four.
Another very nice function jQuery has to offer is the clone function. It lets you take an element and make an exact copy of it. Thanks to jQuery’s chainability its very easy to add that clone where ever you want. So, we want to make a copy of #4, and add its contents to #2.
$("#4").clone().prependTo("#2");
So, thats about it for this tutorial on manipulation. I’d love some comments, what sorts of things you’d like to see next or feedback on it.
Subscribe to feeds
May 9, 2008
Well written and well designed. Will look forward to learn more from your blog.
May 10, 2008
Really helpful. I haven’t seen some of these before.
May 28, 2008
Great man thank you very much, i’m loving Jquery everyday more!
July 4, 2008
Clear and to the point. Exactly what I needed was an
example to distinguish “html” vs. “text”.
Thanks!
July 16, 2008
one more easy-to-grasp jQuery tutorial. thanks.
I’d love to see some info on creating timed animation. i.e. show this img for 5 second then show this img for 4 seconds then go to the site. like a low-budget intro i guess.
also integrating audio would be nice. (can you tell I’m trying to get away from Flash for the simple stuff) just some thoughts.
August 24, 2008
Hi great tutorial and thanks!
didn’t want to sound like nit-picking but when using the append and prepend function a space does not get added to the new text unless there is a space at the start.
ie. $(“#4″).append(“(space here)hoola hoops”);
Cheers!
September 24, 2008
Nice article, simple, clean and easy to understand.
When appending items or prepending items, sunsequent appends or prepends overwrite the existing ones. It’d be nice to see how to do this.
October 25, 2008
jquery very nice,
thanks