jQuery Articles - Page 32 of 42

There may be a situation when you would like to insert new one or more DOM elements in your existing document. jQuery provides various methods to insert elements at various locations.The after( content ) method insert content after each of the matched elements whereas the method before( content ) method inserts content before each of the matched elements.After contentThe after( content ) method inserts content after each of the matched elements.ExampleYou can try to run the following code to learn how to insert an element into DOM, with after() method:Live Demo           jQuery after(content) method ... Read More

To remove all the elements from DOM using element ID, use the remove() method.ExampleYou can try to run the following code to remove all the elements from DOM using element ID:Live Demo $(document).ready(function(){    $("button").click(function(){       $("#mydiv").remove();    }); }); Click to remove all elements This is some text. This is demo text.

To replace only text inside a div using jQuery, use the text() method.ExampleYou can try to run the following code to replace text inside a div:Live Demo $(document).ready(function(){     $("#button1").click(function(){          $('#demo').html('Demo text');    }); }); This is it! Replace

To replace innerHTML of a div in jQuery, use the html() or text() method.ExampleYou can try to run the following code to learn how to replace innerHTML of a div:Live Demo $(document).ready(function(){     $("#button1").click(function(){          $('#demo').html('Demo text');    }); }); This is Amit! Replace

To get the value of div content in jQuery, use the text() method. The text() method gets the combined text contents of all matched elements. This method works for both on XML and XHTML documents.ExampleYou can try to run the following code to get the value of div content using jQuery:Live Demo $(document).ready(function() {    $("#button1").click(function() {      var res = $('#demo').text();      alert(res);    }); }); This is demo text. Get

With jQuery, it’s easy to get selected text from a drop-down list. This is done using the select id. To change the selected value of a drop-down list, use the val() method.ExampleYou can try to run the following code to learn how to change the selected value of a drop-down list. Here, we have a default select option first, but the alert shows the second option, which have been changed using the val method():Live Demo           jQuery Selector                          $(document).ready(function() {       ... Read More

To animate scrollLeft using jQuery, use the animate() method with scrollLeft.ExampleYou can try to run the following code to learn how to animate scrollLeft using jQuery:Live Demo $(document).ready(function(){     $('#scrollme').click(function() {     $('html,body').animate({         scrollLeft: $('#demo').css('left')     }, 500, function() {         $('html, body').animate({             scrollLeft: 0         }, 500);     }); }); }); #demo {     width: 100px;     height: 100px;     background: green;     position: relative;     left: 800px; } Click to scroll left

To position horizontal scroll bar at center of div, use the scrollleft. You can try to run the following code to position horizontal scroll bar in div.ExampleThe scroll bar is positioned at center of div:Live Demo               jQuery Scroll                              $(document).ready(function(){                         $(document).ready(function(){             var outerContent = $('.demo');             var innerContent = $('.demo > div');                         outerContent.scrollLeft( (innerContent.width() - outerContent.width()) / 2);                 });                          });                             html, body, div {             margin:0;             padding:0;         }         .demo {             width:400px;             overflow-x:scroll;         }                 #viewContainer {             height:120px;             width:1000px;             display:table;         }         .myclass {             width:250px;             height:100%;             display:table-cell;             border:2px solid blue;         }                               Far left     left     center     right     Far right      

To scroll to element in horizontal div, use the scrollleft.ExampleYou can try to run the following code to learn how to scroll to element in jQuery:Live Demo               jQuery Scroll                              $(document).ready(function(){            document.addEventListener('DOMContentLoaded', function () {               var frames = document.getElementById('frames');               frames.addEventListener('click', function (e) {                  if (e.target.classList.contains('item')) {                    e.target.parentNode.scrollLeft = e.target.offsetLeft;                  }              });           });                          });                                   .myclass {             width: 300px;             display: flex;             position: relative;             overflow-x: scroll;         }             .item {             width: 400px;             background: #FFB563;             margin-right: 40px;         }                                     demo1         demo2         demo3         demo4         demo5         demo6         demo7         demo8            

test answer