核心要點

• jQuery結(jié)合JavaScript可以修改HTML元素的文本內(nèi)容，使其包含新的文本、圖像、代碼等。本文重點介紹三個jQuery函數(shù)：innerText()、innerHTML()和textContent()。
• innerText()函數(shù)讀取和寫入元素起始標(biāo)簽和結(jié)束標(biāo)簽之間的文本，包括換行符；innerHTML()函數(shù)修改頁面元素內(nèi)的HTML，但會去除換行符；textContent()函數(shù)修改頁面元素的文本，同樣會去除換行符。
• textContent()函數(shù)存在換行符問題：它不像innerText()函數(shù)那樣在兩個段落之間顯示換行符。此函數(shù)受Firefox、Chrome和Opera支持，但不支持Internet Explorer。
• 盡管innerText和innerHTML都用于操作HTML元素的內(nèi)容，但在jQuery中的工作方式不同。innerHTML獲取或設(shè)置元素的HTML內(nèi)容，解析HTML字符串并將其呈現(xiàn)為HTML；而innerText獲取或設(shè)置元素的文本內(nèi)容，將HTML標(biāo)簽顯示為純文本。

jQuery可以與JavaScript結(jié)合使用，修改HTML元素的文本內(nèi)容，并將其設(shè)置為包含新的內(nèi)容，例如文本、圖像、代碼或任何你想要的內(nèi)容。我們將詳細介紹以下JavaScript函數(shù)，并展示其使用方法、時機和適用場景。本文涵蓋以下jQuery函數(shù)：innerText()、innerHTML()和textContent()。

jQuery innerText() 函數(shù)

語法： document.elementID.innerText = value

功能： JavaScript讀取和寫入屬性，指定元素起始標(biāo)簽和結(jié)束標(biāo)簽之間的文本。

行為： 包括換行符。

瀏覽器兼容性： innerText()在我們測試的所有瀏覽器中都能正常工作。

基本示例：

<p>段落內(nèi)文本</p>

JavaScript innerHTML() 函數(shù)

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

功能： 原生JavaScript函數(shù)，用于更改頁面元素內(nèi)的HTML。

行為： 去除換行符。

瀏覽器兼容性： innerHTML在所有瀏覽器中都受支持。

基本示例：

<p>段落內(nèi)文本</p>

高級示例： 使用正則表達式將標(biāo)簽替換為n，確保其工作方式類似于innerText，最后的replace()是一個正則表達式，用于移除所有HTML標(biāo)簽。

<p>段落內(nèi)文本</p>

jQuery textContent() 函數(shù)

語法：

<p>段落內(nèi)文本</p>

功能： jQuery的Firefox函數(shù)，用于更改頁面元素的文本。

行為： 去除換行符。

瀏覽器兼容性： 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 代碼，用于測試所有函數(shù)并選擇一個！

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

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

(以下為FAQ部分，已根據(jù)原文進行改寫和精簡，避免重復(fù))

以上是jQuery set innertext（），innerhtml（），textContent（）的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！