Javascript Innerhtml

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

您應該知道如何修改頁面上顯示的文本或 HTML,以使您的網站更具交互性。這就是 HTML innerTextinnerHTML 屬性的用武之地。

這些屬性使修改 DOM 元素的文本及其 HTML 代碼變得容易.在本指南中,您將學習如何使用 innerTextinnerHTML JavaScript 屬性。

什麼是 JavaScript innerHTML?

innerHTML JavaScript 屬性定義網頁上元素的 HTML 內容。 InnerHTML 是 HTML DOM 的一個屬性。 innerHTML 常用於定義和修改

元素的內容

你可以像這樣使用innerHTML:..

document.getElementById ("paragraph") innerHTML = " Karma career!”;

這行代碼定義了“Karma career”的“paragraph”

元素的內容! getElementById () 方法通過其 ID 檢索元素。

瀏覽器設置一個 href = "/what-is-the-javascript-dom /" > 對像模型 (DOM) 文檔 加載頁面時。此 DOM 是頁面上顯示的一系列對象。

DOM 意味著您不必每次更改 Web 元素時都更改 HTML 代碼。您可以使用 DOM 和 JavaScript 更改頁面在特定會話中的顯示方式

什麼是 JavaScript innerText?

JavaScript innerT ext 屬性定義元素的文本內容。它還定義了其後代的內容。後代可以在段落中包含標籤

innerText的語法類似於innerHTML:..

document.getElementById("element") InnerText = "This is ”;

將 id 為“element”的元素的文本值設置為“這是一個測試”。

您可以通過轉到您的JavaScript 控制台並選擇要修改的元素:

這會更改網頁上第一個 HTML

標記的內容。如果要替換文字,可以使用innerText屬性:

修改頁面“這是一個測試。” "

讓我們從更改網頁上的文本開始。我們將創建一個帶有抽認卡的簡單網頁。該網頁將顯示一個關於 HTML 的問題。它會有一個按鈕,單擊該按鈕,將揭示一個 HTML 問題的答案。

創建一個網頁

我們的第一步是為我們的轉發創建一個 index.html 文件:

div>

這個頁面創建了一個包含三個組件的容器。首先,我們有我們問用戶的問題。我們有消息如何揭曉答案。我們的頁面以顯示響應的按鈕結束

我們的代碼返回元素的文本內容。

 

現在我們來看看我們的網頁:

JavaScript函數. 當按鈕被點擊時,這個函數揭示了我們問題的答案:

要通過按下按鈕來激活我們的功能,我們將創建一個簡單的事件監聽器。這個監聽器會聽到點擊我們的按鈕:

我們已經完成了我們的閃存卡應用程序的設置。如果我們查看我們的網頁並單擊“顯示響應”按鈕,我們段落的文本會更改以顯示響應: