JavaScript中使用innerHTML的缺點

HTML代表超文字標記語言，透過HTML我們可以設計網頁區塊。HTML是一種前端標記語言，用於構建前端頁面的內容。這意味著我們可以構建網頁的結構。

透過HTML，我們可以設計任何網站的內容。這意味著我們可以為任何網站建立標題、按鈕、段落、頁首、頁尾、連結等。

示例

讓我們嘗試理解如何實現一個程式：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic of HTML</title>
</head>
<body>
   <h1>H1 Heading </h1>
   <p>This is a paragraph </p>
   <a href = "#">Link</a>
   <br><br>
   <button>Button</button>
   <footer>This is a footer</footer>
</body>
</html>

在上面的程式中，我們建立了一個標題、段落、連結、換行標籤、按鈕和頁尾。正如你在上面的程式中看到的，我們可以透過以下方式編寫HTML程式。

innerHTML

innerHTML就像每個HTML元素的一個屬性。這意味著，假設我們在HTML中建立了一個div標籤，在div標籤內建立了paragraph標籤，那麼我們可以說paragraph標籤是innerHTML，而整個div是outerHTML。

此外，我們還可以使用JavaScript中的innerHTML透過其標籤名稱、ID或類名來獲取任何標籤的屬性。

以下是顯示innerHTML的程式碼片段：

<div><p>Hello world</p><div>

在上面的程式碼片段中，你可以說整個div標籤是outerHTML，而整個p標籤是innerHTML。

示例

讓我們嘗試用一個合適的例子來理解：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic of HTML</title>
</head>
<body>
   <div>Hello <strong>HTML</strong></div>
</body>
</html>

在上面的程式中，你可以看到，最初我們建立了一個div標籤，在div標籤內建立了strong標籤。所以div標籤將是outerHTML，而div標籤內寫入的內容就是innerHTML。

innerHTML的缺點

以下是使用innerHTML的缺點：

innerHTML速度慢

innerHTML速度慢，因為當我們在程式碼中使用innerHTML屬性時，它允許我們使用JavaScript語言進行更改。它非常慢，因為即使我們必須再次解析內容，innerHTML也已經解析了內容，這就是它需要時間的原因。

附加到任何DOM元素的事件處理程式都會被保留

當我們使用事件處理程式時，事件處理程式不會自動附加到innerHTML建立的新元素。要更改這一點，我們必須跟蹤事件處理程式並手動將它們附加到新元素。

這意味著首先，我們必須透過innerHTML獲取元素屬性，然後才能將其附加到新元素。

示例

讓我們嘗試用一個合適的例子來理解：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic of HTML</title>
</head>
<body>
   <p id= 'demo'>Hello</p>
   <button onclick="Change()">Change</button>
   <script>
      function Change()
      {
         let p = document.getElementById('demo');
         p.innerHTML = '<span>Hello World</span>';
      }
   </script>
</body>
</html>

正如你在上面的程式中看到的，我們首先獲取已經保留的元素，然後手動將它們附加到新的span元素。你可以看到事件處理程式之前和之後輸出截圖中的變化。

HTML的其他一些缺點是：

到處都進行了替換

當使用innerHTML屬性進行修改時，所有DOM節點都必須再次解析和建立。

無法追加innerHTML

在JavaScript中，“+=”通常用於追加。但是，當使用innerHTML追加到HTML標籤時，整個標籤會被重新解析。

示例

<spam id="tp">Tutorials Point</p>
subject = document.getElementById('#tp')

// The whole "tp" tag is reparsed
subject.innerHTML += '<span> Tutorix </span>'

破壞文件

innerHTML不提供正確的驗證，因此可以使用任何有效的HTML程式碼。這有可能破壞JavaScript文件。甚至可以使用損壞的HTML，這可能會導致意外問題。

用於跨站點指令碼攻擊

網頁中的文字、影像或元素可能會被駭客或惡意使用者用來更改文字或資料，並透過其他HTML元素標籤顯示一些不同的、不需要的或具有威脅性的內容。這會導致敏感和機密資訊發生更改。

更新於：2022年8月26日

3000+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告