jQuery中html()与text()方法获取及设置元素内容详解

使用html()方法处理HTML内容

该方法功能类似于JavaScript原生的innerHTML属性，主要用于读取或修改指定元素内部的HTML结构。若需获取某元素的HTML内容，可执行如下操作：

 
var p_html = $("p").html(); // 获取p元素内部的HTML代码

若需向指定元素写入HTML代码，同样调用该方法并传入目标字符串作为参数。例如，将p元素的HTML内容设置为指定文本，代码如下：

 
// 设置p元素的HTML代码
$("p").html("欢迎您访问简明现代魔法图书馆～～");

注意事项：html()方法适用于XHTML文档，但在XML文档中无法正常工作。

使用text()方法处理纯文本内容

该方法功能类似于JavaScript原生的innerText属性，用于读取或设置元素内的纯文本内容。沿用上述HTML结构，使用text()方法对p元素进行操作：

 
var p_text = $("p").text(); // 获取p元素的纯文本内容

与html()类似，若需为元素设置文本内容，必须传递一个参数。例如，将p元素的文本内容设置为指定字符串，代码如下：

 
// 设置p元素的纯文本内容
$("p").text("欢迎您访问简明现代魔法图书馆～～");

使用text()方法时需注意以下两点：

原生JavaScript中的innerText属性在Firefox浏览器中存在兼容性问题，而jQuery的text()方法支持所有主流浏览器。

text()方法对HTML文档和XML文档均有效。

在展示好友列表场景中，若需动态显示好友名字，可在<p>元素中设置id属性：<p id="p${friend.friendId}"></p>。随后JS文件可通过动态获取该id，并利用text()方法完成赋值，例如：$("#p"+userId).text(name);