.text()

所属分类：DOM 操作 > DOM 插入现有元素内 英文文档：.text()
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

Contents:

.text()返回: String

描述: 得到匹配元素集合中每个元素的合并文本，包括他们的后代

  • 添加的版本: 1.0.text()

    • 这个方法不接受任何参数。/div>

      和 .html() 方法不同， .text() 在XML 和 HTML 文档中都能使用。.text() 方法返回一个字符串，包含所有匹配元素的合并文本。  （由于在不同的浏览器中的HTML解析器的变化，返回的文本中换行和其他空白可能会有所不同。）考虑下面的html：

      1
      2
      3
      4
      5
      6
      7
      		 
      <div class="demo-container">
            <div class="demo-box">Demonstration Box</div>
        <ul>
        <li>list item 1</li>
        <li>list <strong>item</strong> 2</li>
        </ul>
        </div>

      代码$('div.demo-container').text() 将提供下面的结果:

      Demonstration Box list item 1 list item 2

      .text() 方法不能使用在 input 元素或scripts元素上。 input 或 textarea 需要使用 .val() 方法获取或设置文本值。得到scripts元素的值，使用.html()方法

      从 jQuery 1.4开始， .text()方法返回文本内容和作为元素节点的CDATA 节点。

      例子:

      Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      		 
      <!DOCTYPE html>
      <html>
      <head>
        <style>
        p { color:blue; margin:8px; }
        b { color:red; }
        </style>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
      </head>
      <body>
        <p><b>Test</b> Paragraph.</p>
        <p></p>
      <script>
      var str = $("p:first").text();
      $("p:last").html(str);
      </script>
       
      </body>
      </html>

      Demo:

      .text( textString )返回: jQuery

      描述: 设置匹配元素集合中每个元素的文本内容为指定的文本内容。

      • 添加的版本: 1.0.text( textString )

        • textString
          类型: String
          用于设置匹配元素内容的文本

      • 添加的版本: 1.4.text( function(index, text) )

        • function(index, text)
          类型: Function()
          用来返回设置文本内容的一个函数。接收元素的索引位置和文本值作为参数。

      和 .html() 方法不同， .text() 在XML 和 HTML 文档中都能使用。

      我们必须意识到这种方法提供了必要的字符串从提供的正确的HTML中脱离出来。这样做， 他调用DOM 方法 .createTextNode(), 一种替代的特殊字符与HTML对应（比如< 替换为 &lt; )方法。考虑下面的html：

      1
      2
      3
      4
      5
      6
      7
      		 
      <div class="demo-container">
        <div class="demo-box">Demonstration Box</div>
        <ul>
          <li>list item 1</li>
          <li>list <strong>item</strong> 2</li>
        </ul>
      </div>

      $('div.demo-container').text('<p>This is a test.</p>');代码语句将输出以下 DOM :

      1
      2
      3
      		 
      <div class="demo-container">
      &lt;p&gt;This is a test.&lt;/p&gt;
      </div>

      它会出现在渲染的页面上就好像标签被暴露，像这样：

      1
      		 
      <p>This is a test</p>

      .text() 方法不能使用在 input 元素上。 输入的文本需要使用 .val() 方法。

      从 jQuery 1.4开始， .text()方法允许我们通过函数来传递文本内容。

      1
      2
      3
      		 
      $('ul li').text(function(index) {
        return 'item number ' + (index + 1);
      });

      给定一个拥有3个<li>元素，在这个例子中将输出下面的DOM：

      1
      2
      3
      4
      5
      		 
      <ul>
        <li>item number 1</li>
        <li>item number 2</li>
        <li>item number 3</li>
      </ul>

      例子:

      在段落中添加文本。注意这个<b>标签将从HTML中脱离出来。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      		 
      <!DOCTYPE html>
      <html>
      <head>
        <style>
       
        p { color:blue; margin:8px; }
        </style>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
      </head>
      <body>
        <p>Test Paragraph.</p>
      <script>$("p").text("<b>Some</b> new text.");</script>
       
      </body>
      </html>

      Demo: