jQuery Tutorial #05 Append, AppendTo, Prepend, PrependTo, Before and After methods

alexendre-maxim(63)

Published in

#utopian-io

Words

1050

Reading

5 min

Listen

Play

Image Source

Repository

https://github.com/jquery/jquery

What Will I Learn?

I will learn how to add a content inside and outside an element using Append, AppendTo, Prepend, PrependTo, Before and After methods.

What's the append/appendTo methods and how to use them.
The definition of prepend/prependTo methods and their uses.
The concept of before/after methods and their difference with the (append, prepend) methods.

Requirements

Knowledge about HTML5 and CSS3
Knowledge about jQuery
A text editor like notpad ++

Difficulty

Basic

Description

In this tutorial we will continue our tutorial about the jQuery framework, in this part we will take the Append , AppendTo , Prepend, prependTo ,Before and After methods , to add content inside and outsite our elements.

1- Append Method :

The append method used to add a specified content at the end of the selected element, the content can be an HTML element ' div , heading , img ..etc ' , can be also a text or javascript element ..etc, this method will append or attach the content before the end tag of the selected element, but there is some elements like ' input , img ' can't show the added element, so it's better to append a content to an element that contains start and end tag like the div element .

To use the append method we need firstly to select the element then append to this element this content

$('Element').append("Content");

In my example I have a list and I want to add another item to this list, I have an input and a button when I write something and click on the button , the value that I have written will be appended to the list, to do that this is the code :

/****** Append *****/

$('.btnAppend').click(function () {

$('.listLanguages').append("<li>" + $('.inputAppend').val() + "</li>");

});

When I click on the button, the system will append to '.listlanguages' this content "<li>" + $('.inputAppend').val() + "</li>" and this is the result :

2- AppendTo Method :

The appendTo method is similar to the append, the only difference is order, but they do the same thing, the appendTo method add a specified content at the end of the selected element , to use it we must reverse the order , we apply it to the added element.

To use the appendTo method we must reveste the order , we start with the content and we append this content to this element.

$("Content").appendTo('Element');

I will repeat the same example when I click on the button I will add the value of the input or the text that I have written to the list of languages, this is my code :

/****** AppendTo *****/

$('.btnAppendTo').click(function () {

$("<li>" + $('.inputAppendTo').val() + "</li>").appendTo($('.listLanguages'));

});

The appendTo add the content at the end of the element, let's try to add the PHP language after CSS3

3- Prepend Method :

The prepend method used to add a specified content at the beginning of the selected element, it will ignore all element and add the content after the start tag to be the first item, theses methods like the create function in databases it will add an element at the end of the table or at the beginning .

It has the same syntax or order with the append method , firstly we select the element then we apply the method to prepend the content.

$('Element').prepend("Content");

I will continue in the same example, I will add the word HTML5 at the beginning of the list to be the first item, this is my code

/****** Prepend *****/

$('.btnPrepend').click(function () {

$('.listLanguages').prepend("<li>" + $('.inputPrepend').val() + "</li>");

});

The HTML5 item will be at the first of the list when we click on the button and this is the result :

4- PrependTo Method :

This method is similar to the prepend, the only difference is order, but they do the same thing.

To use this method we just reverse the order of the prepend and add the ' To '

$("Content").prependTo('Element');

The content will prependTo the selected element , I will take my previous example to see the difference between prepend and prependTo , this is my code :

/****** PrependTo *****/

$('.btnPrependTo').click(function () {

$("<li>" + $('.inputPrependTo').val() + "</li>").prependTo($('.listLanguages'));

});

When I click on the button it will take the value of the input and prepend it to the list and this is the result

5- Before Method :

The before method allow adding elements front of the selected element, is the same of append and prepend but the difference is they add inside the selected element , but the before add the elements outside , exactly before the element , it adds a specified content like the previous methods.

The syntax is $('Element').before("Content");

This method will append the content before the element and this is my code :

/****** Before ******/

$('.btnBefore').click(function () {

$('.listLanguages').before("<p>" + $('.inputBefore').val() + "</p>");

});

I will add a paragraph after the list, the paragraph is ' I will start with ' to start with the languages that we have appended inside the element, and before the element we will add a paragraph we can say also an introduction.

6- After Method :

The after method allow adding elements after the selected element , it will attach the content after the end tag of the selected element, the content can be html elements , texts ..etc , you can add anything to anyelement or elements.

We just replace the before by the after $('Element').after("Content");

This method will add the content after the selected element, this is my code to understand more

/****** After *****/

$('.btnAfter').click(function () {

$('.listLanguages').after("<p>" + $('.inputAfter').val() + "</p>");

});

I will add a paragraph after the list of languages when I click on the button and this is the result :