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.

<table class="holder" border="1">
<tbody>
<tr>
<td id="1">One</td>
<td id="2">Two</td>
<td id="3">Three</td>
<td id="4">Four</td>
<td id="5">Five</td>
</tr>
</tbody></table>

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("<strong>cool this is bold</strong>");

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.