www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery append() and prepend() Methods Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
Adding new stuff to existing HTML elements is very easy with jQuery. In this lesson we will use jQuery append() and prepend() methods to add new stuff to existing HTML elements.

As their names suggest the append() method adds the new stuff to the end of the selected element, while the prepend() method add the new stuff to the beginning of the selected element. The beginning of an element here refers to just after the opening tag of the selected element and the end of an element here refers to just before the closing tag of the selected element.

Here is an example:

<script type="text/javascript">
function testAppend() {
$("#exlist").append(" <li> Appended item </li> ");
function testPrepend() {
$("#exlist").prepend(" <li> Prepended item </li> ");

<a href="javascript:void(0);" onclick="testAppend();">Append Item</a> <br>
<a href="javascript:void(0);" onclick="testPrepend();">Prepend Item </a>

<ol id = "exlist" >
<li> Existing List Item </li>
<li> Existing List Item </li>

When we run the above example and click on the "Append Item" link, a new item is inserted at the bottom of the list just before the </ol> tag and when we click on the "Prepend Item" link, a new item is inserted at the top of the list just after the <ol> opening tag.

The append() and prepend() methods take a single parameter and append / prepend the same to the selected element. We are not limited to HTML only, we can pretty much add any text using the append() and prepend() methods.

The following example adds some text to our <div> element:

<a href="javascript:void(0);" onclick="$('#exdiv').append('Appended Text. ');"> Append Item</a> <br>
<a href="javascript:void(0);" onclick="$('#exdiv').prepend('Prepended Text. ');"> Prepend Item</a>
<div id="exdiv">
This is some Text.

We can use jQuery methods inline, too, as shown in the above example. Always remeber that the append() and the prepend() methods add new stuff inside the selected element. To add new stuff after or before the selected element, we have after() and before() methods, discussed in the next lesson.
Next >>> Lesson No. 19: jQuery before() and after()

Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.