[ASPNET,JQuery] The difference between html() and val() and text()

To get the content of an textarea ,we can use:
     $("#textareaId").html();
works In IE8, but doesn't work in Firefox 3.6.
To get the value in Firefox, we can use:
     $("#textareaId").val();
So, What is the difference between html() and val() and text()?

1. html() Will return the all html content inside this html element. For example:

here is the html:
     <div id="myDiv">
         <p>hello</p>
         <p>world</p>
     </div>

If we execute
     var string = $("#myDiv").html();
     alert(string);

We will get result
    

2. val() will return the value of a control. For example: if we have a select element in the page:

    <select id="single">
       <option>Single</option>
       <option>Single2</option>
    </select>

Javascript code:
     var string = $("#single").val();
     alert(string);

Will return the current selected value:
    

3. text() will return the all text values of the html element. Let take the previous sample for a test.

Javascript code:
    var string = $("#single").text();
    alert(string);

Will return all values:
    
For another example. If we have html
    <div id="myDiv">
        <p>hello</p>
        <p>world</p>
     </div>
in the page and the following JavaScript code:
    var string = $("#myDiv").text();
    alert(string);

Will return all text:
    

blog comments powered by Disqus