jQuery的text()方法与html()方法比较

约定不等于承诺〃 2023-07-05 13:24 30阅读 0赞

jQuery中对文本内容有text()、html()以及val()方法。对input和textarea元素，使用val()方法获取和设置文本内容。对其它元素，可以使用text方法获取文本，html获取节点内的html内容。以下主要比较text和html方法。

# 使用text()方法获取文本 #

将符合条件的所有元素以及它们的子元素的文本内容用空格或换行符拼接起来。这里有四个点：

*  会对所有符合条件的jQuery对象进行处理
 *  会对jQuery对象的子对象进行处理
 *  只获取文本内容,标签会被过滤掉
 *  获取的内容最后是一个拼接起来的字符串

<div class="demo-container">
      <div class="demo-box">Demonstration Box1</div>
      <ul>
        <li>list item 11</li>
        <li>list <strong>item</strong> 12</li>
      </ul>
    </div>
    
    <div class="demo-container">
      <div class="demo-box">Demonstration Box2</div>
      <ul>
        <li>list item 21</li>
        <li>list <strong>item</strong> 22</li>
      </ul>
    </div>

alert($( "div.demo-container" ).text());

# 使用text()方法，将文本进行转义后，作为文本替换节点内容 #

<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>" );

会将"

This is a test.

"进行转义，并替换原来的节点内容（包括标签和文本）。执行后的DOM如下：

在网页渲染后的效果就是一段纯文本：

This is a test

# text()使用函数作为参数，替换节点内容 #

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

# 使用html()方法获取html内容 #

<div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
    </div>

$( "div.demo-container" ).html();

结果为

<div class="demo-box">Demonstration Box</div>

该方法使用浏览器的innerHTML,有的浏览器下返回的内容不完全和原来一样。

# 使用html()方法替换html内容 #

参数可以直接是html内容，也可以是一个函数，返回html内容，该方法，会用html内容替换节点内容。

$( "div" ).html( function(index){ 
    	return "<span style='color:red;'>Hello <b>Again</b></span>"+index;
    } );

# text()与html()比较 #

相同点：text与html的语法其实很像，没有参数的时候表示获取，有参数的时候表示替换。参数可以是直接的内容，也可以是函数，返回内容。  
不同点：

*  没有参数获取内容时候，text()获取的是所有元素以及它们的子元素的文本内容用空格或换行符拼接起来，只取文本内容，会过滤掉标签。而html()是第一个符号条件的元素的html内容。
 *  带参数的时候，html()可能会有浏览器兼容问题，而text()没有
 *  text()不仅可以用于html，还可以用于xml（感觉现在也很少有人去操作xml了）

# 小结 #

用text()直接获取方法着眼于文本内容，而html()着眼于html内容，语法上没什么差异，因为平时很少完全处理纯文本，基本上还是要关心节点和结构，所以还是html()用得比较多。

欢迎扫描下方二维码关注微信公众号【谈谈IT】，第一时间获取最新文章。  
![欢迎关注同名公众号][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/1e8abcdc16fd4426bb4a9a2d27f75a1b.bmp?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6LCI6LCISVQ=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center