使用 Javascript 更改 Div 的文字

Nithin Krishnan 2023年1月30日 2022年5月11日
  1. 使用 innerHTML 屬性更改 div 文字
  2. 使用 textContent 節點屬性更改 Div 的內容
  3. 內部 HTML 與 textcontent 安全方面
  4. 使用 :after 偽元素更改 div 文字
使用 Javascript 更改 Div 的文字

div 元素本質上是非互動式的。Javascript 通過使其具有互動性來為其注入活力。我們可能需要改寫由 div 顯示的文字。例如,在實現編輯功能時,我們可能會重複使用為開發新增功能而設計的螢幕。只是措辭需要改變。至於新增功能,我們可能需要將按鈕的新增關鍵字改寫為更新等等。讓我們看看幾種可以動態更改 div 文字的方法。

使用 innerHTML 屬性更改 div 文字

與其他程式語言不同,我們不使用 getter 和 setter 方法將文字設定為 HTML 元素。div 的 HTML 元素物件有一個名為 innerHTML 的屬性。我們可以使用它來獲取和設定 HTML 物件的內容。此處 HTML 物件將處於活動狀態。也就是說,它反映了重新整理時瀏覽器中元素屬性的任何更改。

以下是使用 innerHTML 的語法。

var text = htmlElement.innerHTML;
htmlElement.innerHTML = "New Text";

在上面的程式碼片段中,我們使用 htmlElement.innerHTML 獲取 HTML div 元素的內容。此處,htmlElement 是實際的 HTML 物件。類似地,我們可以使用相同的屬性,即元素的 innerHTML,將內容設定為 div。我們只是將文字內容分配給 innerHTML

  • 用法:
<div id="div-element">Hey there!!</div>
window.onload = function() {
    document.getElementById("div-element").innerHTML = "Hello World!!";
    console.log(document.getElementById("div-element").innerHTML);
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!";
    console.log(document.getElementById("div-element").innerHTML);
}

輸出:

Hello World!!
Hello bunny!!

在我們應用 .innerHTML 之前,我們需要選擇 HTML 元素。我們可以通過各種方式做到這一點。Javascript 有許多函式可以用來從 DOM 中查詢元素。以下是一些最常用的方法。

  • getElementById()document 介面的這個函式用於使用 HTML 中指定的 idDOM 中選擇一個元素。該函式返回對應於所選元素的 HTML 物件。
  • getElementsByClassName:我們可以使用 getElementsByClassName 函式根據 css class name 查詢元素。此 javascript 方法將多個元素作為 HTML 物件陣列返回。
  • getElementsByName:還有另一種方法可以選擇具有 name 屬性的元素。我們在 HTML 中為節點指定 name 屬性。此方法返回一個 HTML 物件陣列。我們可以使用它,特別是如果我們有興趣選擇具有特定樣式、CSS 類的多個元素並一次性對它們進行操作。
  • getElementsByTagName:我們還可以使用 getElementsByTagName() 函式根據 HTML 標籤選擇元素。例如,我們可以對 DOM 等部分中的所有 div 元素執行一些操作。顧名思義,該函式返回一個 HTML 物件陣列。
  • querySelector:Javascript querySelector 函式更通用,可用於通過 css query 選擇 HTML 元素。該函式返回滿足在其引數中傳遞的條件的第一個元素。
  • querySelectorAll:這個類似於 querySelector,唯一的區別是它會返回多個滿足作為引數傳遞給它的 css query 格式的元素。

使用 textContent 節點屬性更改 Div 的內容

儘管我們經常使用 innerHTML,但使用它存在安全風險。它與 innerHTML 如何替換 HTML 元素的內容有關。innerHTML 屬性在一個鏡頭中刪除所有子 HTML 節點,並新增其中指定的新內容。

安全風險來自於 innerHTML 屬性允許我們插入任何一段 HTML 程式碼,即使它是有害的程式碼。我們將在下一節討論這個方面。MDN 建議使用 node.textContent 來更改元素的文字。它用我們在 textContent 引數中分配的 text 替換 HTML 中的子節點。參考以下程式碼瞭解用法。

<div id="div-element">Hey there!!</div>
window.onload = function() {
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!"
}

輸出:

Hello bunny!!

在這裡,我們在更改文字之前選擇 HTML 元素 div。我們使用 getElementById() 函式從 DOM 中查詢元素。然後我們使用 textContent 來更改 div 的文字。螢幕載入時不會區分此更改。一旦瀏覽器載入網頁,window.onload 函式就會被執行,並且文字會發生變化。因此,終端使用者始終會看到較新的文字。在螢幕載入時,舊文字到新文字的變化並不明顯。我們還可以在 setTimeOut 方法中使用 textContent 來檢視更改。

內部 HTML 與 textcontent 安全方面

innerHTML 屬性與 textContent 不同。這兩個屬性都以文字作為輸入,但是,這裡的安全漏洞是什麼?在 innerHTML 中,可以新增惡意程式碼。請參閱以下程式碼片段。在這裡,更改反映出來,並且將執行 innerHTML 程式碼。如以下程式碼片段所示,單擊淺綠色 HTML div 元素時,螢幕上會彈出一個不需要的 alert

<div id="div-element"></div>
window.onload = function() {
    var el = document.getElementById("div-element");
    el.innerHTML = `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

如果我們在 textContent 中為 div 元素分配相同的內容,它不會將其呈現為 HTML 元素。Javascript 將內容呈現為螢幕上的文字。所以我們可以從字面上看到 <div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')"> 在網頁中顯示為文字。這方面使程式碼更加安全可靠。因此,如果我們打算更改 HTML 元素的文字,Javascript 最佳實踐(由 MDN 支援)建議使用 textContent 而不是 innerHTML 屬性。

<div id="div-element"></div>
window.onload = function() {
    var el = document.getElementById("div-element");
    el.textContent = `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

使用 :after 偽元素更改 div 文字

如果文字更改微不足道,我們可以使用 CSS 來更改 div 文字。我們使用 :after 偽 HTML 元素,在其中新增我們希望在 content 屬性中顯示的文字。它不適用於像 <img> 這樣的 HTML 元素,其中瀏覽器將內容替換為載入的影象。下面的程式碼詳細說明了用法。

<div class="pvw-title"><span>Facts</span></div>
.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

相關文章 - JavaScript Text