操作DOM：文本内容的获取与设置-优快云博客

本文详细介绍了如何使用jQuery操作DOM获取并设置文本内容，包括.text()方法的使用场景、返回值、注意事项及实例演示。

.text()

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

.text()返回: String

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

添加的版本: 1.0.text()
- 这个方法不接受任何参数。/div>

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

 
              <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 节点。

id="cproIframe_u1730954_2" width="728" height="90" src="http://pos.baidu.com/acom?adn=3&at=231&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=16&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&dai=2&dis=0&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DG3YMabKGLUC7dQSg_sSVhUq90FUGsPEQRh1Tj0HCnMIm7djCYv2-lluVXsyrjAAX%26wd%3D%26eqid%3Db9f3ca760006b62c0000000556149145&ltu=http%3A%2F%2Fwww.css88.com%2Fjqapi-1.9%2Ftext%2F&lu_161=0&lunum=6&n=78035039_cpr&pcs=1222x569&pis=10000x10000&ps=1196x302&psr=1366x768&pss=1222x3517&qn=1d2f0ebab828d4cb&rad=&rsi0=728&rsi1=90&rsi5=4&rss0=%23FFFFFF&rss1=%23FFFFFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_3&stid=5&td_id=1730954&titFF=%E5%AE%8B%E4%BD%93&titFS=12&titTA=left&tn=text_default_728_90&tpr=1444188232956&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u1730954&ti=.text()%20%7C%20jQuery%20API%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3(%E9%80%82%E7%94%A8jQuery%201.0%20-%20jQuery%202.0)&tt=1444188232915.162.234.235" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="margin: 0px; padding: 1px; border: 1px solid rgb(191, 191, 191); outline: 0px; font-size: 16px; vertical-align: baseline; background: transparent;">

例子:

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).

 
              <!DOCTYPE html>
             
              <html>
             
              <head>
             
                <style>
             
                p { color:blue; margin:8px; }
             
                b { color:red; }
             
                </style>
             
                <script src="http://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:

width="100%" height="250" style="margin: 0px; padding: 1px; border: 1px solid rgb(191, 191, 191); outline: 0px; font-size: 16px; vertical-align: baseline; background: transparent;">

.text( textString )返回: jQuery

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

添加的版本: 1.0.text( text )
- text
  
  类型: String or Number or Boolean
  
  用于设置匹配元素内容的文本。当提供的是一个数值或布尔值得时候，那么将被转换成一个字符串表现形式，提供给这个方法。
添加的版本: 1.4.text( function(index, text) )
- function(index, text)
  
  类型: Function()
  
  用来返回设置文本内容的一个函数。接收元素的索引位置和文本值作为参数。

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

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

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

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

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

        
               <p>This is a test</p>

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

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

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

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

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

id="cproIframe_u1730954_3" width="728" height="90" src="http://pos.baidu.com/acom?adn=3&at=231&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=16&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&dai=3&dis=0&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DG3YMabKGLUC7dQSg_sSVhUq90FUGsPEQRh1Tj0HCnMIm7djCYv2-lluVXsyrjAAX%26wd%3D%26eqid%3Db9f3ca760006b62c0000000556149145&ltu=http%3A%2F%2Fwww.css88.com%2Fjqapi-1.9%2Ftext%2F&lu_161=0&lunum=6&n=78035039_cpr&pcs=1222x569&pis=10000x10000&ps=3213x302&psr=1366x768&pss=1222x3524&qn=433a661bdd5c4e81&rad=&rsi0=728&rsi1=90&rsi5=4&rss0=%23FFFFFF&rss1=%23FFFFFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_3&stid=5&td_id=1730954&titFF=%E5%AE%8B%E4%BD%93&titFS=12&titTA=left&tn=text_default_728_90&tpr=1444188232956&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u1730954&ti=.text()%20%7C%20jQuery%20API%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3(%E9%80%82%E7%94%A8jQuery%201.0%20-%20jQuery%202.0)&rs=60010&tt=1444188232915.250.318.319" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="margin: 0px; padding: 1px; border: 1px solid rgb(191, 191, 191); outline: 0px; font-size: 16px; vertical-align: baseline; background: transparent;">

例子:

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

 
               <!DOCTYPE html>
              
               <html>
              
               <head>
              
                 <style>
              
                 p { color:blue; margin:8px; }
              
                 </style>
              
                 <script src="http://code.jquery.com/jquery-latest.js"></script>
              
               </head>
              
               <body>
              
                 <p>Test Paragraph.</p>
              
               <script>$("p").text("<b>Some</b> new text.");</script>
              
               </body>
              
               </html>