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:
<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:
<script>
$("table tr td#the_td").html()
</script>
Result:
<table><tr><td id="the_td"><b>The Bold Text</b><i>More Text</i></td></tr></table>
Code:
<script>
$("td#the_td").html("Hello World")
</script>
Result:
<div id="the_div"><table><tr><td id="the_td">Hello World</tr></table></div>
.text()Code:
<script>
$("td#the_td b").text()
</script>
Result:
.append(content)Code:
<script>
$("td#the_td").append("<span>RAWR</span>")
</script>
Result:
<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:
<script>
$("td#the_td").prepend("<span>RAWR</span>")
</script>
Result:
<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:
<script>
$("<span>RAWR</span>").appendTo("td#the_td")
</script>
Result:
<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:
<script>
$("<span>RAWR</span>").prependTo("td#the_td")
</script>
Result:
<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:
<script>
$("td#the_td").after("<span>RAWR</span>")
</script>
Result:
<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:
<script>
$("td#the_td").after("<span>RAWR</span>")
</script>
Result:
<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:
<script>
$("<span>RAWR</span>").insertAfter("td#the_td")
</script>
Result:
<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:
<script>
$("<span>RAWR</span>").insertBefore("td#the_td")
</script>
Result:
<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!