- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 10711 Articles for Web Development
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
128 Views
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.
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
312 Views
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.
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
2K+ Views
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:
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
2K+ Views
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:
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
615 Views
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
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
2K+ Views
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
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
228 Views
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
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
124 Views
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:
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
316 Views
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
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
2K+ Views
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