TechiWarehouse.Com


Top 3 Products & Services

1.
2.
3.

Dated: Dec. 20, 2012

Related Categories

JavaScript Programming

MANIPULATION

The Methods in this group are used to manipulate DOM elements. You can use them to do modifications, make new ones, copy, delete etc.

 

.APPEND( )
Makes a new object according to given parameters and places it at the end of the element set inside the selected element.

$('div#mydiv').append('<p>some paragraph</p>');

 

.APPENDTO( )
Opposite to the .append() methods. Adds the selected element at the end of the element set inside the forwarded element.

$('<p>My heading</p>').appendTo('div#heading');

 

.PREPEND( )
Opposite to the .append() methods. Makes a new object according to the given parameters and places it at the beginning of the element set inside the selected element.It uses selectors, HTML code or already existing elements as parameters.

$('#mydiv').prepand('<p>My text</p>');

Decoding jQuery

.AFTER( )
Makes a new object according to the given parameters and places it immediately after the selected element. It uses selectors, HTML code or already existing elements as parameters.

// makes <div> an element with id second and places it after the element with id first  $('#first').after('div#second');  // makes a new <p> element and places it after the element with id heading  $('#heading).after('<p>My text</p>');

 

.BEFORE( )
Makes a new object according to the given parameters and places it immediately before the selected element. It uses selectors, HTML code or already existing elements as parameters.

$('#heading).before('<p>My text</p>');


.CLONE( )
Makes a duplicate of the selected element that can be later added to other elements using different methods

// example of cloning and adding the cloned element to a different element $('#heading).clone( ).appendTo('div#content);

 

.DETACH( )
Removes elements from DOM but retains their copy in the case you want to return them later

// removes element and places copy in abc object var abc = $('#mydiv').detach( );

 

.EMPTY( )
Deletes all child elements in the selected element from DOM

$('#mydiv').empty( );

 

.REMOVE( )
Similar to the .empty() method. Deletes the selected element and all his childs from DOM. It is possible to forward a parameter for choosing the elements to delete.

//  deletes the element with the id mydiv and with all of his childs $('#mydiv').remove( );  // deletes all <div> elements with the myclass class $('div').remove('.myclass');


.REPLACEWITH( )
Changes every selected element with new given elements, It uses selectors, HTML code or already existing elements as parameters.

$('.myclass').replaceWith('<h2>heading</h2>');

 

.TEXT( )
Returns the text from the selected element and from all his childs or enters new textual content inside the element. If there is a new textual content that is being entered, all elements that were in the selected element are deleted.

// returns textual content $('div.container').text( );  // enters textual content $('div.container').text('Some new text');

 

.WRAP( )
Makes a new element and places it as a parent of the selected element. It uses selectors, HTML code or already existing elements as parameters.

$('p#mytext').wrap('div#container');

 

.UNWRAP( )
Deletes the parent element leaving the selected element and all his childs in place.

$('div.container').unwrap( );

 

.WRAPINNER( )
Makes a new element and places it as a child element to the selected element, enveloping all elements inside him. It uses selectors, HTML code or already existing elements as parameters.

$('div#container').wrapInner('div#wrapper');

 

This was the third part of the lesson about jQuery read the next part of the jQuery tutorial tomorrow.

And you can here see second part of the jQuery tutorial

Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!


Previous Article

Next Article