Home >> Blog >> JavaScript innerHTML 和 innerText：學習
JavaScript innerHTML 和 innerText：學習
您需要知道如何更改頁面上顯示的文本或 HTML，以使您的網站更具交互性。這就是 innerText 和 innerHTML HTML 屬性的用武之地。
這些屬性使更改 DOM 元素的文本及其 HTML 代碼變得容易。在本指南中，您將學習如何使用 JavaScript 的 innerText 和 innerHTML 屬性。
什麼是 JavaScript innerHTML？
JavaScript innerHTML 屬性設置網頁上元素的 HTML 內容。InnerHTML 是 HTML DOM 的一個屬性。innerHTML 通常用於設置和修改
元素的內容。
您可以像這樣使用innerHTML：
document.getElementById("paragraph").innerHTML = "Career Karma!";
這行代碼將“paragraph”
元素的內容設置為“Career Karma！” getElementById() 方法 通過其 ID 檢索元素。
瀏覽器在頁面加載時 定義一個 文檔對像模型 (DOM) 。這個 DOM 是頁面上顯示的一系列對象。
DOM 意味著您不必在每次想要更改 Web 元素時都更改 HTML 代碼。您可以使用 DOM 和 JavaScript 來更改頁面在特定會話中的顯示方式。
什麼是 JavaScript 內部文本？
JavaScript innerText 屬性設置元素的文本內容。它還設置其後代的內容。後代可以在段落中包含 標籤。
innerText 的語法類似於 innerHTML：
document.getElementById(“element”).innerText = “這是一個測試。”;
這會將 id 為“element”的元素的文本值設置為“This is a test”。
您可以通過進入 JavaScript 控制台並選擇要更改的元素來測試這些方法：
這會更改網頁上第一個
HTML 標記的內容。如果要替換文本，可以使用 innerText 屬性：
這會將頁面上第二段（由數字 1 表示）的內容更改為“這是一個測試”。
在 JavaScript 中使用 innerHTML 和 innerText
讓我們從更改網頁上的文本開始。我們將創建一個簡單的抽認卡網頁。此網頁將顯示有關 HTML 的問題。它將有一個按鈕，單擊該按鈕將顯示有關 HTML 的問題的答案。
創建網頁
我們的第一步是為我們的前端創建一個 index.html 文件：
< !DOCTYPE html>
< html>
< head>
< title>HTML Flashcard App
< link rel="stylesheet" href="./styles.css" />
< /head>
< body>
< div class="flashcard">
< h2>Does a hyperlink only apply to text?< /h2>
< p>The answer will be revealed when you press "Show answer"
< button id="showAnswer">Show answer< /button>
< br />
< div id="showMessage">< /div>
< /div>
< script src="./scripts.js">< /script>
< /body>
< /html>
此頁面創建一個包含三個組件的容器。首先，我們有我們要問用戶的問題。我們有關於如何揭示答案的信息。我們的頁面以一個按鈕結束，以顯示答案。
我們的代碼返回我們元素的文本內容：
我們將在 styles.css 文件中應用一些 CSS 樣式以使我們的頁面更漂亮：
< style>
.flashcard {
margin: auto;
width: 50%;
padding: 50px;
margin-top: 10%;
background-color: lightgreen;
text-align: center;
}
button {
border: none;
background-color: hotpink;
padding: 10px;
border-radius: 10px;
}
現在讓我們看一下我們的網頁：
我們的網站顯示的東西看起來更像是一張閃存卡。我們已經為我們的按鈕設計了樣式。
使用 JavaScript innerHTML 和 innerText 更改文本
我們希望在單擊按鈕時顯示問題的答案。首先，我們將選擇我們將在 JavaScript 代碼中使用的文本和按鈕元素。我們將在 scripts.js 文件中編寫所有這些代碼：
var answerText =文檔. 查詢選擇器（'p'）；
var按鈕 =文檔。查詢選擇器（'按鈕'）；
接下來，我們將創建一個 JavaScript 函數 。當按鈕被點擊時，這個函數揭示了我們問題的答案：
函數 showAnswer () {
答案文本。" innerText = "否。超鏈接可用於文本和圖像。" ;
}
為了在按鈕按下時激活我們的功能，我們將創建一個簡單的事件監聽器。此偵聽器偵聽單擊我們的按鈕：
按鈕.addEventListener ( 'click' , showAnswer );
我們已經完成了我們的閃存卡應用程序的設置。如果我們查看我們的網頁並單擊“顯示答案”按鈕，我們段落中的文本會更改以顯示答案：
我們可以使用 JavaScript innerHTML 向這個應用程序添加更多功能 。假設我們希望單擊按鈕後在閃存卡底部顯示一條消息。此消息應顯示為紅色。我們可以使用以下代碼創建此消息：
var message = document.querySelector('#showMessage');
function showAnswer() {
answerText.innerText = "No. Hyperlinks can be used on both text and images.";
message.innerHTML = "< span style='color:red;'>You have revealed the answer.< /span>";
}
讓我們嘗試使用修改後的 showAnswer() 函數和我們編寫的新查詢選擇器運行我們的代碼：
我們使用 innerHTML 方法將 HTML 標記添加到我們的站點。當用戶按下顯示答案按鈕時，此標籤會顯示一條以紅色顯示的消息。
JavaScript innerText 與 innerHTML
innerText 和innerHTML 屬性都允許您訪問和更改標記的內容。innerText 返回沒有任何後代或間距的文本。innerHTML 返回包含任何後代和間距的文本。
如果您想以純文本形式查看元素的內容，您可以使用 innerText。如果您想查看出現在字符串中的所有 HTML 標記，則使用 innerHTML 更為合適。
總之，innerText 允許您使用純文本，而 innerHTML 允許您使用字符串中的 HTML。
innerText 和 innerHTML 在現代瀏覽器中都有廣泛的支持。
結論
innerText 和 innerHTML 屬性 操作 HTML DOM。innerText 重新調整元素的文本內容，不帶間距或後代。innerHTML 返回元素的內容以及任何間距和後代。
作為獎勵挑戰，看看您是否可以讓我們上面的代碼在第二次單擊按鈕時隱藏答案。您的代碼應該：
.當用戶點擊按鈕時隱藏答案
.顯示答案時，將按鈕的文本從“顯示答案”更改為“隱藏答案”。
.用戶按下“隱藏答案”後，保留“您已透露答案”消息。
如果您正在尋找更多有助於您學習 JavaScript 的教程，請查看我們 的 JavaScript 初學者最佳教程指南 。
關於我們： Career Karma 是一個平台，旨在幫助求職者找到、研究和聯繫工作培訓計劃，以提升他們的職業生涯。了解 CK 出版物。