核心要點(diǎn)

• jQuery結(jié)合JavaScript可以修改HTML元素的文本內(nèi)容，使其包含新的文本、圖像、代碼等。本文重點(diǎn)介紹三個(gè)jQuery函數(shù)：innerText()、innerHTML()和textContent()。
• innerText()函數(shù)讀取和寫入元素起始標(biāo)籤和結(jié)束標(biāo)籤之間的文本，包括換行符；innerHTML()函數(shù)修改頁面元素內(nèi)的HTML，但會(huì)去除換行符；textContent()函數(shù)修改頁面元素的文本，同樣會(huì)去除換行符。
• textContent()函數(shù)存在換行符問題：它不像innerText()函數(shù)那樣在兩個(gè)段落之間顯示換行符。此函數(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)容。我們將詳細(xì)介紹以下JavaScript函數(shù)，並展示其使用方法、時(shí)機(jī)和適用場(chǎng)景。本文涵蓋以下jQuery函數(shù)：innerText()、innerHTML()和textContent()。

jQuery innerText() 函數(shù)

語法： document.elementID.innerText = value

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

行為： 包括換行符。

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

基本示例：

<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>

高級(jí)示例： 使用正則表達(dá)式將標(biāo)籤替換為n，確保其工作方式類似於innerText，最後的replace()是一個(gè)正則表達(dá)式，用於移除所有HTML標(biāo)籤。

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

jQuery textContent() 函數(shù)

語法：

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

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

行為： 去除換行符。

瀏覽器兼容性： Firefox有其自身的textContent屬性，Chrome和Opera也支持，但I(xiàn)E不支持！

基本示例： 給定以下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 代碼，用於測(cè)試所有函數(shù)並選擇一個(gè)！

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ù)原文進(jìn)行改寫和精簡(jiǎn)，避免重複)

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