jQuery 文档操作 - html() 方法与text()方法

一、html()

1、用法：html() 方法返回或设置被选元素的内容 (inner HTML)。

2、语法

a、$(selector).html()

说明：当使用该方法返回一个值时，它会返回第一个匹配元素的内容。

注意：是第一个匹配元素的内容。

实例：

$("p").html()

b、$(selector).html(content)

说明：当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

注意：是改变所有匹配元素的内容

实例：

$("p").html("Hello <b>world!</b>")                             //显示Hello <strong>World!</strong>

c、$(selector).html(function(index,oldcontent))

说明：使用函数来设置所有匹配元素的内容。index是元素的索引，oldcontent为元素的旧值。

实例：

$("p").html(function(n，old){
return "这个 p 元素的 index 是：" + n;
});

二、text()

语法

a、$(selector).text()

说明：当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。

与html()不同一：注意是获取所有匹配元素的内容

实例：

$("p").text()

与html()不同二：取出来的内容会自动删除HTML标记

b、$(selector).text(content)

说明：当该方法用于设置值时，它会覆盖被选元素的所有内容。

实例：

$("p").text("Hello <b>world!</b>")                    //显示Hello <span style="font-family: Arial, Helvetica, sans-serif;"><b>world!</b></span>

与html()不同三：此时world！不会加粗,且会把标记以文本形式显示出来

c、$(selector).text(function(index,oldcontent))

说明：使用函数设置所有被选元素的文本内容。

补充：index为匹配元素的索引，oldcontent为匹配元素的旧内容

实例：

$("p").text(function(n，old){
return "这个 p 元素的 index 是：" + n;
});

三、总结

1、text()返回值时会删除HTML标记且会匹配所有项，而html()返回值时不删除HTML标记且只匹配第一项

2、text()设置值时不会识别HTML标记，会把HTML标记以文本的形式显示，而html()设置值时会识别HTML标记