jQuery Tutorial

jQuery DOM insertion - text method

text method

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.

Getting Text Contents

.text() // to get the text contents.

Getting Text Contents Example

here gets the combined text contents for HTML element having class 'parent'.

<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:

Setting Text Contents

.text(text) // to set the text contents.

Setting Text Contents Example

here setting the text contents using string.

<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:

Welcome to jQuery!

Hello

Goodbye

here setting the text contents using another html element 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( $('.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

Hello

Goodbye

text method with custom function parameter

here setting text with index number for every li html element under ul element.

<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

Hello

Goodbye

line number: 1
line number: 2
line number: 3

Setting HTML text element with html string

here HTML element "<b>" is escaped and set as string for html element 'p'.

<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: