Jquery and SMF For Free #3(Manipulation)

[Agent Moose]

This tutorial will contain most of the functions you can use to change text or HTML.
.html() - Get the html contents of the first matched element.
.html(value) - Set the html contents of every matched element.
.text() - Get the text contents of all matched elements.
.text(value) - Set the text contents of all matched elements.
.append(content) - Append content to the inside of every matched element.
.prepend(content) - Prepend content to the inside of every matched element.
.appendTo(content) - Append all of the matched elements to another, specified, set of elements.
.prependTo(content) - Prepend all of the matched elements to another, specified, set of elements.
.after(content) - Insert content after each of the matched elements.
.before(content) - Insert content before each of the matched elements.
.InsertAfter(content) - Insert all of the matched elements after another, specified, set of elements.
.InsertBefore(content) - Insert all of the matched elements before another, specified, set of elements.

Now the Examples:
Here is the HTML we will be using for each example:

Code:

<div id="the_div"><table><tr><td id="the_td"><b>The Bold Text</b><i>More Text</i></td></tr></table></div>

.html()
Code:

Code:

<script>
$("table tr td#the_td").html()
</script>

Result:

Code:

<table><tr><td id="the_td"><b>The Bold Text</b><i>More Text</i></td></tr></table>

Code:

Code:

<script>
$("td#the_td").html("Hello World")
</script>

Result:

Code:

<div id="the_div"><table><tr><td id="the_td">Hello World</tr></table></div>

.text()
Code:

Code:

<script>
$("td#the_td b").text()
</script>

Result:

Code:

The Bold Text

.append(content)
Code:

Code:

<script>
$("td#the_td").append("<span>RAWR</span>")
</script>

Result:

Code:

<div id="the_div"><table><tr><td id="the_td"><b>The Bold Text</b><i>More Text</i><span>RAWR</span></td></tr></table></div>

.prepend(content)
Code:

Code:

<script>
$("td#the_td").prepend("<span>RAWR</span>")
</script>

Result:

Code:

<div id="the_div"><table><tr><td id="the_td"><span>RAWR</span><b>The Bold Text</b><i>More Text</i></td></tr></table></div>

.appendTo(content)
Code:

Code:

<script>
$("<span>RAWR</span>").appendTo("td#the_td")
</script>

Result:

Code:

<div id="the_div"><table><tr><td id="the_td"><b>The Bold Text</b><i>More Text</i><span>RAWR</span></td></tr></table></div>

.prependTo(content)
Code:

Code:

<script>
$("<span>RAWR</span>").prependTo("td#the_td")
</script>

Result:

Code:

<div id="the_div"><table><tr><td id="the_td"><span>RAWR</span><b>The Bold Text</b><i>More Text</i></td></tr></table></div>

.after(content)
Code:

Code:

<script>
$("td#the_td").after("<span>RAWR</span>")
</script>

Result:

Code:

<div id="the_div"><table><tr><td id="the_td"><b>The Bold Text</b><i>More Text</i></td><span>RAWR</span></tr></table></div>

.before(content)
Code:

Code:

<script>
$("td#the_td").after("<span>RAWR</span>")
</script>

Result:

Code:

<div id="the_div"><table><tr><span>RAWR</span><td id="the_td"><b>The Bold Text</b><i>More Text</i></td></tr></table></div>

.insertAfter(content)
Code:

Code:

<script>
$("<span>RAWR</span>").insertAfter("td#the_td")
</script>

Result:

Code:

<div id="the_div"><table><tr><td id="the_td"><b>The Bold Text</b><i>More Text</i></td><span>RAWR</span></tr></table></div>

.insertBefore(content)
Code:

Code:

<script>
$("<span>RAWR</span>").insertBefore("td#the_td")
</script>

Result:

Code:

<div id="the_div"><table><tr><span>RAWR</span><td id="the_td"><b>The Bold Text</b><i>More Text</i></td></tr></table></div>

There Ya go!  I know it isn't a very good tutorial, but, it works right.  If you have any questions, just ask!