To show and hide div on mouse click using jQuery, use the toggle() method. On mouse click, the div is visible and on again clicking the div, it hides.ExampleLive Demo $(document).ready(function(){     $('#show').click(function() {       $('.menu').toggle("slide");     }); }); Click to Show/ Hide div             India       US       UK       Australia      

To hide and show an HTML element using jQuery, use the hide and show() methods. Here, the element is hidden and shown on button click,ExampleLive Demo $(document).ready(function(){     $("#visible").click(function(){         $("p").show();     });      $("#hidden").click(function(){         $("p").hide();     }); }); This text  will show on clicking "Show element" button, and hide on clicking "Hide element" button. Hide element Show element

jQuery error() methodThe error() method triggers the event when an element encounters an error. This method deprecated in jQuery 1.8.ExampleYou can try to run the following code to learn how to work with error() method in jQuery −Live Demo $(document).ready(function(){     $("img").error(function(){         $("img").replaceWith("Image isn't loading");     });     $("button").click(function(){         $("img").error();     }); }); Error event jQuery ajaxError() methodThe ajaxError( callback ) method attaches a function to be executed whenever an AJAX request fails. This is an ... Read More

To use multiple js files, use the same getScript(), which is used to add a single js file. We’re having result.js file with the following code snippet −function CheckJS(){    alert("This is JavaScript - File1"); }We’re having result2.js file with the following code snippet −function CheckJS(){    alert("This is JavaScript – File2"); }ExampleHere's the code snippet to add multiple js files. Here, we will call the function in the above 2 js files −                                 $(document).ready(function() {             ... Read More

To detect the eventType in jQuery, use the event type property. You can try to run the following code to learn how to detect eventType in jQuery −ExampleLive Demo  $(document).ready(function(){     $("p").on("mouseover mouseout",function(event){         $("div").html("Event Type: " + event.type);     });  }); This has mouseover and mouseout event defined. Keep your cursor to see the event type below.

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