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 before() and after() 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
In the previous lesson, we used the append() and prepend() methods to insert stuff inside an element.

Sometimes we need to insert things before or after some element(s), instead. To do so we have the before() and after() methods, in jQuery. They work pretty much the same way as append() and prepend() methods do.

Here is an example:

<script type="text/javascript">
function testBefore() {
$("#exlist").before("<b>Text Added Before the List. </i><br>");
function testAfter() {
$("#exlist").after("<i>Text Added After the List. </i><br>");
<a href="javascript:void(0);" onclick="testBefore();">Add text before the list</a><br>
<a href="javascript:void(0);" onclick="testAfter();">Add text after the list</a> <br>

<ol id="exlist">
<li>List Item 1</li>
<li>List Item 2</li>

The before() method in the above example adds the following before the <ol> element:

<b>Text Added Before the List. </i><br>

The after() method in the above example adds the following after the <ol> element (note that after the <ol> element means that after the closing tag </ol>):

<i>Text Added After the List. </i><br>

Next >>> Lesson No. 20: jQuery remove() and empty()

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