HTML - DOM innerText 屬性

HTML DOM 的innerText 屬性用於直接獲取（讀取）或更改（更新）網頁上 HTML 元素內的可見文字內容。

當您訪問 element.innerText 時，它會檢索該元素的當前內容。如果您為其分配新內容（例如，element.innerText = "new_content"），它會將現有內容更新為新的 HTML。

"innerText" 屬性類似於innerHTML 屬性，但它們之間存在一些細微差別。"innerText" 屬性檢索或設定元素的可見文字內容，不包括 HTML 標籤，而 "innerHTML" 檢索或設定元素內部的 HTML 標記，包括標籤。瞭解更多

以下互動式示例演示了innerText 方法在不同場景下的用法：

HTML DOM innerText - 技術教學

歡迎來到 Tutorialspoint

您來對地方學習了……

語法

以下是 HTML DOM 的innerText（讀取可見內容）屬性的語法：

element.innerText

要使用新內容更新現有的可見 HTML 內容，請使用以下語法：

element.innerText = text

其中 "text" 是元素的文字內容。

引數

此屬性不接受任何引數。

返回值

此屬性返回一個字串，其中包含元素的可見文字內容，不包括隱藏元素（如<script> 或<style>）內的文字。

示例 1：讀取當前文字內容

以下是 HTML DOM innerText 屬性的基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerText</title>
<style>
   button{
      padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the button to display the current paragraph text.</p>
<p id="myParagraph">Welcome to Tutorialspoint</p>
<button onclick="displayText()">Display Text Content</button>
<script>
   function displayText() {
      const paragraph = document.getElementById('myParagraph');
      alert("The text of this paragraph is: " + paragraph.innerText);
   }
</script>
</body>
</html>

以上程式讀取了段落 ("p") 元素的可見內容。

示例 2：更改（更新）文字內容

以下是 HTML DOM innerText 屬性的另一個示例。我們使用此屬性來更新 "div" 元素的現有可見內容：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Change the innerText of p element</title>
<style>
   button{
      padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below button to change (update) the Paragraph text.</p>
<p id="myParagraph">Initial text content.</p>
<button onclick="changeText()">Change Text</button>
<script>
   function changeText() {
      const paragraph = document.getElementById('myParagraph');
      paragraph.innerText = 'Updated text using innerText property!';
   }
</script>
</body>
</html>

以上程式更新（更改）了 "p" 元素的內容。

示例 3：操作巢狀元素

此示例展示了使用innerText 屬性操作巢狀元素。

最初，它以巢狀方式顯示 "父文字" 和 "巢狀文字"，但單擊按鈕後，會將父 <div> 的文字更改為 "新父文字"，而巢狀<div> 的文字保持不變：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerText</title>
<style>
   #parent{
       border: 1px solid #000;
       padding: 10px;
   }
   #child{
       margin-top: 10px;
       border: 1px dashed #000;
       padding: 5px;
   }
   button{
       padding: 8px 12px;
       margin: 5px 0px;
   }
</style>
</head>
<body>
<p>Click the below button to change "Parent text" to 'New Parent Text'.</p>
<div id="parent">
Parent text
<div id="child">
Nested text
</div>
</div>
<button onclick="changeNestedText()">Change Parent Text</button>
<script>
   function changeNestedText() {
      const parentElement = document.getElementById('parent');
      parentElement.innerText = 'New parent text';
   }
</script>
</body>
</html>

支援的瀏覽器

屬性
innerText	是	是	是	是	是

html_dom_element_reference.htm

列印頁面