www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery text(), val() and html() Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
jQuery provides us text(), val() and html() methods to get and set text, values and HTML.

Text is a textual, but not HTML, representation of the inner content of regular elements like <p>, <div>, etc. Values are used with the form element. HTML is the same as text including the markup tags.

jQuery text() Method
jQuery text() method allows us to get / set the inner content of regular elements like <p>, <div>, <h1>, etc. The text() method, called without a parameter returns the inner content of a regular tag. To change the text of an element we pass the new text to the text() method as an argument.

Here is an example:

<div id = "text" >
This is some text inside a div element.
</div> <br>
<input type="text" value="Enter some text" id="txt" size="30" /><br>
<a href="javascript:void(0)" onClick="changeText()">Change Text</a>
<script type = "text/javascript" >
function changeText() {
$ ( "#text" ). text ($("#txt").val());
alert($ ( "#text" ). text());
}
</script>

In the above example our function changeText() sets the text of our <div> element to the value of the input field and then displays the updated text in an alert box. The val() method returns the value of an input form field.

jQuery val() Method
jQuery val() method allows us to get / set the value of an input form field.

Here is an example:

<input type="text" disabled id="txt" size="30" /><br>
<a href="javascript:void(0)" onClick="changeText()">Update Above Text Box</a><br>
<input type="text" id="txt2" size="30" value="Enter Some Text"/><br>
<script type = "text/javascript" >
function changeText() {
$ ( "#txt" ). val ($("#txt2").val());
}
</script>

In the above example we have used two input fields. The first one is not editable as we have used its disabled property. The actual work is done with a single line of code in boldface above, where we set the value of the first text box to the value of the second one. Clicking on the "Update Above Text" links fires our changeText() function to do the update.

jQuery html() Method
The jQuery html() method is a more interesting one. It allows us to get / set the HTML.

Here is an example:

<div id="testHTML"><b>This text is in boldface...</b></div>
<br>
<a href="javascript:void(0)" onClick="changeText()">Update Above Text</a>
<script type = "text/javascript" >
function changeText() {
alert($ ( "#testHTML" ). html());
$ ( "#testHTML" ). html("<b><i>This text is Italicized and Bolded </i> </b>");
alert($ ( "#testHTML" ). html());
}
</script>

The above example uses the html() method to alter the HTML of the page. When we run the above example and click on the "Update Above Text", our changeText() function is called. The changeText() function gets the HTML of our <div> tag and displays it in an alert box. Next it modifies the HTML and finally displays the same in an alert box again to show the changes.
Next >>> Lesson No. 16: jQuery attr() Method





Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.