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

字数895 大约花费4分钟

目录

  1. 1. 使用 text()方法获取文本
  2. 2. 使用 text()方法,将文本进行转义后,作为文本替换节点内容
  3. 3. text()使用函数作为参数,替换节点内容
  4. 4. 使用 html()方法获取 html 内容
  5. 5. 使用 html()方法替换 html 内容
  6. 6. text()与 html()比较
  7. 7. 小结

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

使用 text()方法获取文本

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

  • 会对所有符合条件的 jQuery 对象进行处理
  • 会对 jQuery 对象的子对象进行处理
  • 只获取文本内容, 标签会被过滤掉
  • 获取的内容最后是一个拼接起来的字符串
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <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>
1
alert($( "div.demo-container" ).text());

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

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>
1
$("div.demo-container" ).text("<p>This is a test.</p>" );

会将”

This is a test.

“进行转义,并替换原来的节点内容(包括标签和文本)。执行后的 DOM 如下:
1
2
3
<div class="demo-container">
&lt;p&gt;This is a test.&lt;/p&gt;
</div>

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

This is a test

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

1
2
3
4
5
<ul>
<li></li>
<li></li>
<li></li>
</ul>
1
2
3
$("ul li" ).text(function( index ) {
return "item number" + (index + 1 );
});

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

1
2
3
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
1
$("div.demo-container" ).html();

结果为

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

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

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

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

1
2
3
<div></div>
<div></div>
<div></div>
1
2
3
$("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的文章均为原创或翻译(翻译会注明外文来源),转载请以链接形式标明本文地址: http://tantanit.com/jquery-de-text-fang-fa-yu-html-fang-fa-bi-jiao/

谈谈IT

欢迎关注官方微信公众号获取最新原创文章