Use the jQuery empty() method to remove all child nodes from a parent node.ExampleYou can try to run the following code to remove all child nodes from a parent node using jQuery:Live Demo $(document).ready(function(){       $("#button1").click(function(){          $("ul").empty();       }); });             li (child)       li (child)       li (child)       li (child)           Remove   Click Remove to remove all child nodes.

To append an element after an element using jQuery, use the insertAfter() method.ExampleYou can try to run the following code to learn how to append an element after an element using jQuery:Live Demo           The jQuery Example                              $(document).ready(function() {             $("div").click(function () {                $("#source").insertAfter(this);             });          });                              .div {             margin:10px;             padding:12px;             border:2px solid #666;             width:60px;          }                             Click on any square below to see the result:                                            

To append an element before an element, use the insertBefore() method. The insertBefore( selector) method inserts all of the matched elements before another, specified, set of elements.ExampleLive Demo           The jQuery Example                              $(document).ready(function() {             $("div").click(function () {                $("#source").insertBefore(this);             });          });                              .div {              margin:10px;              padding:12px;              border:2px solid #666;              width:60px;          }                             Click on any square below to see the result:                                            

To set the HTML content of an element, use the html() method. You can try to run the following code to get HTML content of an element using jQuery −ExampleLive Demo $(document).ready(function(){     $("#button1").click(function(){         $("#demo").html("This text is highlighted.");     }); }); This is a paragraph. Click to set HTML

To wrap multiple divs in one with jQuery, use the wrapAll() method. You can try to run the following code to wrap multiple divs in one with jQuery −ExampleLive Demo $(document).ready(function() {    $("#button1").click(function(){       $('.b,.c').wrapAll('');      }); }); .wrap {   color:blue; }  This is div 1  This is div 2  This is div 3 Wrap

To wrap two adjacent elements, loop through each myclass, add it to array and determining the next element has a .myclass. You can try to run the following code to learn how to wrap two adjacent elements in a containing div −ExampleLive Demo $(document).ready(function() {     var result = [];         $('.myclass').each(function() {         var box2 = $(this).next().hasClass('myclass');                 result.push($(this));                 if(!box2)         {             var container = $('');             container.insertBefore(result[0]);             for(x=0;x

The best way to add DOM elements with jQuery is to append the HTML string, using append() method. You can try to run the following code to insert DOM element −ExampleLive Demo           The jQuery Example                              $(document).ready(function() {             $("div").click(function () {                $(this).append('' );             });          });                              .div {             margin:10px;             padding:12px;             border:2px solid #666;             width:60px;          }                             Click on any square below to see the result:                                      

To select an element by name with jQuery, use the name element for the input field. You can try to run the following code to select element by name −ExampleLive Demo $(document).ready(function(){   $("#button1").click(function(){      var sname = jQuery("#form1 input[name=sub]").val();      alert(sname);   }); });   Subject Name: Get

To manipulate CSS pseudo elements using the hover() function. You can try to run the following code to learn how to manipulate CSS pseudo-elements −ExampleLive Demo $(document).ready(function(){     $('span').hover(function(){     $(this).addClass('change').attr('data-content','bar'); }); }); span.change:after {     content: attr(data-content) ' This is demo text.'; } Place cursor below... foo

To handle jQuery AJAX error. The ajaxError( callback ) method attaches a function to be executed whenever an AJAX request fails. This is an Ajax Event.Here is the description of all the parameters used by this method −callback − The function to execute. The XMLHttpRequest and settings used for that request are passed as arguments to this function. A third argument, an exception object, is passed if an exception occured while processing the request.The following is an example showing the usage of this method:Live Demo           Handling errors in jQuery           ... Read More