jQuery set innertext（），innerhtml（），textContent（）

核心要点

• jQuery结合JavaScript可以修改HTML元素的文本内容，使其包含新的文本、图像、代码等。本文重点介绍三个jQuery函数：innerText()、innerHTML()和textContent()。
• innerText()函数读取和写入元素起始标签和结束标签之间的文本，包括换行符；innerHTML()函数修改页面元素内的HTML，但会去除换行符；textContent()函数修改页面元素的文本，同样会去除换行符。
• textContent()函数存在换行符问题：它不像innerText()函数那样在两个段落之间显示换行符。此函数受Firefox、Chrome和Opera支持，但不支持Internet Explorer。
• 尽管innerText和innerHTML都用于操作HTML元素的内容，但在jQuery中的工作方式不同。innerHTML获取或设置元素的HTML内容，解析HTML字符串并将其呈现为HTML；而innerText获取或设置元素的文本内容，将HTML标签显示为纯文本。

jQuery可以与JavaScript结合使用，修改HTML元素的文本内容，并将其设置为包含新的内容，例如文本、图像、代码或任何你想要的内容。我们将详细介绍以下JavaScript函数，并展示其使用方法、时机和适用场景。本文涵盖以下jQuery函数：innerText()、innerHTML()和textContent()。

jQuery innerText() 函数

语法： document.elementID.innerText = value

功能： JavaScript读取和写入属性，指定元素起始标签和结束标签之间的文本。

行为： 包括换行符。

浏览器兼容性： innerText()在我们测试的所有浏览器中都能正常工作。

基本示例：

<p>段落内文本</p>

JavaScript innerHTML() 函数

语法： document.getElementById("elementID").innerHTML = value document.all.elementID.innerHTML = value // 仅限IE

功能： 原生JavaScript函数，用于更改页面元素内的HTML。

行为： 去除换行符。

浏览器兼容性： innerHTML在所有浏览器中都受支持。

基本示例：

<p>段落内文本</p>

高级示例： 使用正则表达式将标签替换为n，确保其工作方式类似于innerText，最后的replace()是一个正则表达式，用于移除所有HTML标签。

<p>段落内文本</p>

jQuery textContent() 函数

语法：

<p>段落内文本</p>

功能： jQuery的Firefox函数，用于更改页面元素的文本。

行为： 去除换行符。

浏览器兼容性： Firefox有其自身的textContent属性，Chrome和Opera也支持，但IE不支持！

基本示例： 给定以下HTML片段：<div id="divA">这是一些文本</div>

var message = div.innerHTML.replace(/<br>/gi,"\n").replace(/(]+)>)/gi, "");

换行符问题

innerText()显示“para1”和“para2”，中间带有换行符，但textContent()则不显示：

// IE/innerText(): para1 para2 // FF/textContent(): para1para2

HTML/JS 代码，用于测试所有函数并选择一个！

var text = element.textContent;
element.textContent = "i love jQuery (4u :P )";

其他可用于更改页面元素的jQuery函数： innerText.replace、innerHTML、innerText、textContent、html()、text()、div.innerHTML.replace、document.body.innerText、$.fn.innerText、div:contains、document.getElementById(id).innerText。

(以下为FAQ部分，已根据原文进行改写和精简，避免重复)

以上是jQuery set innertext（），innerhtml（），textContent（）的详细内容。更多信息请关注PHP中文网其他相关文章！