.text()

Syntax for .text() (getter)

.text()

It returns a string containing the combined text contents of the matched elements.

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


<!DOCTYPE html>
<html>
    <head>
        <script src="http://java2s.com/style/jquery-1.8.0.min.js">
        </script>
        <script type="text/javascript">
            $(function(){<!--from w w  w .j a  v a  2 s  .  co  m-->
                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 code above generates the following result.

Syntax for .text() (setter)

.text() (setter) sets the content of each element in the set of matched elements to the specified text. It has two forms.

.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

Its return value is the jQuery object, for chaining purposes.

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


<!DOCTYPE html>
<html>
    <head>
        <script src="http://java2s.com/style/jquery-1.8.0.min.js">
        </script>
        <script>
            $(function(){<!--from  w w  w  .ja  v  a 2 s.  c om-->
                $("p").text("updated value.");
            });
        </script>
    </head>
    <body>
        <p>Blah</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

Assign value to div element

The following code assigns text value to DIV element.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){<!--   ww w  . java 2  s. c om-->
        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

The code above generates the following result.

Change text to uppercase

The following code changes text from list to uppercase.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- ww  w .ja  va2  s.com-->
           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>java2s.com</li>
        <li>java2s.com</li>
        <li>java2s.com</li>
      </ul>
      <ul id="results">
      </ul>
  </body>
</html>

Click to view the demo

The code above generates the following result.

Set the text for first span

The following replaces span text value.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w w  w .  j  av  a 2 s  . co  m-->
           $("#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

The code above generates the following result.

Set HTML tag as text

The following code uses HTML as text.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w w  w  .j a va  2s.  com-->
            $("p").text("<b>bold</b>bold.");
        });
    </script>
  </head>
  <body>
    <body>
      <p>java 2s.com</p>
      <DIV></DIV>
  </body>
</html>

Click to view the demo

The code above generates the following result.

Get text and attribute


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){<!--from   w  w  w  .j a va2 s.  c  o  m-->
          $("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

The code above generates the following result.

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

The following code uses .text() returning as input for .html().


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   w w w .j av  a2s. c o m-->
            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

The code above generates the following result.