jQuery DOM

Different types of Jquery DOM methods :

1. after( content )
   • It is Used to Insert content after each of the matched elements.
   • Example:- $('div').after('<p class="para">This is a after paragraph</p>' );
2. before( content )
   • It is Used to Insert content before each of the matched elements.
   • Example:-$('div').before('<p class="para">This is a before paragraph</p>' );
3. append( content )
   • It is used to Append new content to the inside of every matched element.
   • Example:- $('div').append('<p class="para">This is inside paragraph</p>' );
4. appendTo( selector )
   • Append all of the matched elements to another, specified, set of elements.
   • Example:-$('div').appendTo('#res');
5. clone( )
   • This is useful for moving copies of the elements to another location in the DOM.
   • Example:-$('div').clone().insertAfter('div');
6. empty( )
   • Remove all child nodes from the set of matched elements.
   • Example:-$('div').empty();
7. insertAfter( selector )
   • Insert all of the matched elements after specified, set of elements.
   • Example:-$('div').clone().insertAfter('div');
8. insertBefore( selector )
   • Insert all of the matched elements before specified, set of elements.
   • Example:-$('div').clone().insertBefore('div');
9. prepend( content )
   • It is used to prepend new content to the inside of every matched element.
   • Example:- $('div.demo-box').prepend('<div class="insertion">This text was inserted </div>');
10. prependTo( selector )
    • Prepend all of the matched elements to another, specified, set of elements.
    • Example:-$('<div class="insertion">This text was inserted </div>') .prependTo('div.demo-box');
11. remove( expr )
    • It will Remove all the matched elements from the DOM
    • Example:-$('div.demo-box').remove();
12. replaceAll( selector )
    • Replaces the elements matched by the specified selector with the matched elements.
    • Example:-$('<div class="div"></div>').replaceAll('p' );
13. replaceWith( content )
    • Replaces all matched elements with the specified HTML or DOM elements.
    • Example:-$('div.demo-box') .replaceWith('<div class="insertion">Replacement Box</div>');
14. wrap( elem ) / wrap( html )
    • Wrap each matched element with the specified element. / Wrap each matched element with the specified HTML content.
    • Example:- $('div.demo-box').wrap('<div class="insertion"></div>');
15. wrapAll( elem/html )
    • Wrap all the elements in the matched set into a single wrapper element.
    • Example:- $('div.demo-box').wrapAll('<div class="insertion"></div>');
16. wrapInner( elem/html )
    • Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
    • Example:- $('div.demo-box').wrapInner('<div class="insertion"></div>'); 

Example:-

<script type="text/javascript">
$("#htm").click(function() {
var va = $("#p1").html();
$("#p2").html(va);
});
 
$("#txt").click(function() {
var va = $("#p1").text();
$("#p2").text(va);
});
</script>