Difference between text() and html() method in jQuery Last Updated : 06 Jun, 2022 Comments Improve Suggest changes Like Article Like Report Text() Method: This method returns the text content of the selected elements. It overwrites the content of all the matches element while setting the content. Syntax: To return text content:$(selector).text()To set text content:$(selector).text(content)To set the text content using a function:$(selector).text(function(index, currentcontent)) html() Method: This method is used to set or return the content (innerHTML) of the selected elements. It returns the content of the first matches element or sets the content of all matches elements. Syntax: Return content: $(selector).html() Set content: $(selector).html(content) Set content using a function: $(selector).html(function(index, currentcontent)) Example: html <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script> $(document).ready(function () { $("#button1").click(function () { alert("Using text()- " + $("#demo").text()); }); $("#button2").click(function () { prompt("Using html()- " + $("#demo").html()); }); }); </script> </head> <body> <p id="demo">By clicking on the below buttons, <b>difference</b> between <i>text</i> and <i>html</i> in <b>jQuery</b> is shown. </p> <button id="button1">Text</button> <button id="button2">HTML</button> </body> </html> Output: Before clicking on buttons: After clicking on Text Button: After clicking on html Button: Differences between text() and html() methods: text() methodhtml() methodIt is used to set or return the text content of selected elements.It is used to set or return the content of selected elements.This method cannot be used on form inputs or scripts.This method can not be used for the value of a script element.It is used in both XML and HTML documents.It is used only for HTML documents.It is slower than html().It is ~2x faster than .text().text() method overwrites the content of ALL matched elements.It returns the content of the FIRST matched element.When text() method is used HTML markup will be removedIt overwrites the content of ALL matched elements. Supported Browsers: Google ChromeInternet ExplorerFirefoxOperaSafari Comment More infoAdvertise with us Next Article Difference between text() and html() method in jQuery A aktmishra143 Follow Improve Article Tags : Difference Between JavaScript Web Technologies HTML JQuery jQuery-Misc Web Technologies - Difference Between +3 More Similar Reads Difference between html() text() and val() methods in jQuery In this article, we are going to discuss the differences between html(), text(), and val() methods and their usage. 1. jQuery html() method: The html() method is used to set or return the inner HTML of a selected element. It works similarly to innerHTML in normal JavaScript to set or get the content 4 min read What is the difference between eq() and get() methods in jQuery ? In this article, we will discuss all the differences between eq() and get() methods in jQuery. eq() Method: This method is used to locate the selected elements directly and returns an element with a specific index. Syntax: $(selector).eq(index) Example: In this example, we will set the different te 2 min read Difference between prop() and attr() Methods in jQuery In this article, we will learn about the differences between the prop() and the attr() in JQuery. jQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. JQuery 2 min read Difference between innerText and innerHTML innerText and innerHTML are both properties of JavaScript. However, there are differences in which the text is handled. Let us check the syntax of the two and then take an example to look at the differences. Syntax: Let us assume that we have a JavaScript variable called x.let x = document.getElemen 1 min read What's the difference between selector and filter() in jQuery? jQuery Selectors: allow us to select and manipulate HTML element(s). It is used to select HTML elements such as ids, classes, types, attributes, etc using jQuery selectors and then add any CSS properties or events to the selected HTML elements. Syntax: For selecting a button tag the syntax would be 2 min read Like