jQuery Tutorial
text() method is used to get the combined text contents of each element in the set of matched elements ( including their descendants), or set the text contents for the matched HTML elements.
.text() // to get the text contents.
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ alert( $('.parent').text()); }); </script> </head> <body> <p>Test Section</p> <div class="parent"> Welcome to jQuery! <div class="codingpointer">Hello</div> <div class="codingpointer">Goodbye</div> </div> </body> </html>Output:
.text(text) // to set the text contents.
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $("p").text("Welcome to jQuery!"); }); </script> </head> <body> <p>Test Section</p> <div> <div class="codingpointer">Hello</div> <div class="codingpointer">Goodbye</div> </div> </body> </html>Output:
here setting the text contents using another html element text contents.Welcome to jQuery!
HelloGoodbye
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $("p").text( $('.codingpointer').text()); }); </script> </head> <body> <p>Test Section</p> <div> <div class="codingpointer">Hello</div> <div class="codingpointer">Goodbye</div> </div> </body> </html>Output:
HelloGoodbye
HelloGoodbye
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $("ul li").text(function(index) { return "line number: "+(index+1).toString();}); }); </script> </head> <body> <p>Test Section</p> <div> <div class="codingpointer">Hello</div> <div class="codingpointer">Goodbye</div> </div> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>Output:
Test Section
HelloGoodbye
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $("p").text("<b>Welcome to jQuery</b>!"); }); </script> </head> <body> <p>Test Section</p> <div> <div class="codingpointer">Hello</div> <div class="codingpointer">Goodbye</div> </div> </body> </html>Output:
<b>Welcome to jQuery</b>!
HelloGoodbye
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page