- 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
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
474 Views
To replace the content of an element using jQuery, use the text() method.ExampleYou can try to run the following code to replace content inside a div:Live Demo $(document).ready(function(){ $("#button1").click(function(){ $('#demo p').text('The replaced text.'); }); }); The initial text Replace Text
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
24K+ Views
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
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
16K+ Views
To get HTML content of an element using jQuery, use the html() method. The html() method gets the html contents of the first matched element.ExampleYou can try to run the following code to get HTML content of an element using jQuery:Live Demo $(document).ready(function(){ $("#button1").click(function(){ var res = $('#demo').html(); alert(res); }); }); This is demo text. Get
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
7K+ Views
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
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
2K+ Views
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
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
1K+ Views
To find horizontal scroll position, use the jQuery scrollLeft() method.ExampleYou can try to run the following code to find horizontal scroll position using jQuery.Live Demo jQuery scrollLeft() method $(document).ready(function(){ $("div.demo").scrollLeft( 200 ); $("div.demo").mousemove(function () { var left = $("div.demo").scrollLeft(); $("#result").html("left offset: " + ... Read More
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
3K+ Views
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
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
1K+ Views
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