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中文網其他相關文章！