.text()

Syntax for .text() (getter)

.text()

Parameters

None

Return value

A string containing the combined text contents of the matched elements.

Description

Get the combined text contents of each element in the set of matched elements, including their descendants.

Syntax for .text() (setter)

.text(textString): textString: A string of text to set as the content of each matched element
.text(function): function: A function returning the text to set as the content

Return value

The jQuery object, for chaining purposes.

Description

Set the content of each element in the set of matched elements to the specified text.

Examples

Assign text value to DIV

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var input = $("form input:text");
        $("div").text("For this type jQuery found " + input.length + ".");
    });
    </script>
  </head>
  <body>
     <form>
      <input type="text" />
    </form>
     <div></div>
  </body>
</html>

Click to view the demo

Change text to uppercase

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           var mappedItems = $("li").map(function (index) {
              var data = $("<li>").text($(this).text()).get(0);
              $(data).text($(data).text().toUpperCase());
              return data;
           });
           $("#results").append(mappedItems);
        });
    </script>
  </head>
  <body>
    <body>
      <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
      </ul>
      <ul id="results">
      </ul>
  </body>
</html>

Click to view the demo

Replace Span Text Value

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("#container").click(function (e) {
              var $ch = $(e.target).children();

              $("#results span:first").text($ch.length);

              e.preventDefault();
              return false;
            });

        });
    </script>
  </head>
  <body>
    <body>
    <div id="container">
        <div>
          <p>This <span>is the <em>way</em> we</span>
          write <em>the</em> demo,</p>
        </div>

    </div>
    <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
  </body>
</html>

Click to view the demo

Output HTML as text

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").text("<b>bold</b>bold.");
        });
    </script>
  </head>
  <body>
    <body>
      <p>asdf</p>
      <DIV></DIV>
  </body>
</html>

Click to view the demo

Get text from tag

 
<html>
  <head>

    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
          $("div[id]").one("click", function(){
              var idString = $(this).text() + " = " + $(this).attr("id");
              $(this).text(idString);
          });

    });
    </script>
  </head>
  <body>
      Click to see.
      <div>div</div>
      <div id="hey">div</div>
  </body>
</html>

Click to view the demo

Set text for tag

 
<html>
  <head>

    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
          $("div[id]").one("click", function(){
              var idString = $(this).text() + " = " + $(this).attr("id");
              $(this).text(idString);
          });

    });
    </script>
  </head>
  <body>
      Click to see.
      <div>div</div>
      <div id="hey">div</div>
  </body>
</html>

Click to view the demo

use .text() returning as input for .html()

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var str = $("p:first").text();
            $("p:last").html(str);
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>
  </head>
  <body>
    <body>
      <p class="selected highlight">Hello first</p>
      <p class="">Hello</p>
    </body>
</html>

Click to view the demo

text escapes HTML

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").text("<b>Some</b> new text.");
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>
  </head>
  <body>
    <body>
      <p class="selected highlight">Hello first</p>
      <p class="">Hello</p>
    </body>
</html>

Click to view the demo

.text() method combines the text of all the elements in a selected set.

 
<!DOCTYPE html>
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                var content = $("p").text();
                document.writeln(content);
            });
        </script>
    </head>
    <body>
        <p>A</p>
        <p>B</p>
        <p>C</p>
    </body>
</html>

Click to view the demo

The following code use .text() to update html.

.text() accepts a string argument containing the new text you'd like to insert.

 
<!DOCTYPE html>
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js">
        </script>
        <script>
            $(function(){
                $("p").text("updated value.");
            });
        </script>
    </head>
    <body>
        <p>Blah</p>
    </body>
</html>

Click to view the demo

Get text from <p>

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               var str = $("p:first").text()+"added";
               $("p:last").html(str);
        });
    </script>
  </head>
  <body>
    <body>
         <p>asdf</p>
         <p>asdf</p>
         <p>asdf</p>
         <p>asdf</p>
  </body>
</html>

Click to view the demo