使用 Javascript 更改 Div 的文字
-
使用
innerHTML屬性更改div文字 -
使用
textContent節點屬性更改 Div 的內容 -
內部 HTML 與
textcontent安全方面 -
使用
:after偽元素更改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 中指定的id從DOM中選擇一個元素。該函式返回對應於所選元素的 HTML 物件。getElementsByClassName：我們可以使用getElementsByClassName函式根據css class name查詢元素。此 javascript 方法將多個元素作為 HTML 物件陣列返回。getElementsByName：還有另一種方法可以選擇具有name屬性的元素。我們在 HTML 中為節點指定 name 屬性。此方法返回一個HTML物件陣列。我們可以使用它，特別是如果我們有興趣選擇具有特定樣式、CSS 類的多個元素並一次性對它們進行操作。getElementsByTagName：我們還可以使用getElementsByTagName()函式根據 HTML 標籤選擇元素。例如，我們可以對DOM等部分中的所有div元素執行一些操作。顧名思義，該函式返回一個HTML物件陣列。querySelector：JavascriptquerySelector函式更通用，可用於通過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';
}