HTML - DOM innerHTML 屬性

上一頁
下一頁

HTML DOM innerHTML 屬性用於檢索（讀取）元素的現有 HTML 內容並使用新的 HTML 內容更新它。

當您訪問 element.innerHTML（例如，document.getElementById('id').innerHTML 或任何其他方法）時，它會檢索該元素的當前內容。如果您為其分配新內容（例如，element.innerHTML = "new_content"），它會將現有內容更新為新的 HTML。

以下互動式示例演示了innerHTML 方法在不同場景下的用法：

HTML DOM innerHTML - 技術教學
歡迎來到 Tutorialspoint
您來對地方學習了……

語法

以下是 HTML DOM innerHTML（讀取內容）屬性的語法：

element.innerHTML

要使用新內容更新現有 HTML 內容，請使用以下語法：

element.innerHTML = text

其中“text”是元素的文字內容。

引數

此屬性不接受任何引數。

返回值

此屬性返回一個包含元素內 HTML 內容的字串。

示例 1：使用 innerHTML 檢索 HTML 內容

以下是 HTML DOM innerHTML 屬性的基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title>
<style>
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<h3>Click the below button to retrieve the "p" element content.</h3>
<p id="my_ele">Welcome to Tutorialspoint</p>
<button onclick="read()">Read</button>
<script>
   function read(){
      let ele = document.getElementById("my_ele");
      alert("The 'p' element content is: " + ele.innerHTML);
   }
</script>
</body>
</html>

以上程式檢索“p”元素的 HTML 內容。

示例 2：使用 innerHTML 更新 HTML 內容

以下是 HTML DOM innerHTML 的另一個示例。我們使用此屬性在執行時動態更改或更新 HTML 元素中的內容：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title>
<style>
    button{
        padding: 8px 12px;
    }
</style>
</head>
<body>
<p>Click the button below to dynamically update the content of the 'div' element.</p>
<p id="heading">Heading</p>
<div id="content">Welcome to TP, you are at the right place to learn..</div>
<br>
<button onclick="changeContent()">Change Content</button>
<script>
   function changeContent() {
      // Update the heading and content using innerHTML
      document.getElementById('heading').innerHTML = '<b>New Heading</b>';
      document.getElementById('content').innerHTML = '<b>New content</b> has been updated!';
   }
</script>
</body>
</html>

以上程式更新了 id 為“heading”和“content”的元素的現有內容。

示例 3：使用“innerHTML”屬性清除內容

此示例演示瞭如何在單擊“清除內容”按鈕時使用innerHTML 屬性動態清除<div> 元素內的內容：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title>
<style>
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below to clear the content.</p>
<div id="myDiv">Content to be cleared</div><br>
<button onclick="clearContent()">Clear Content</button>
<script>
   function clearContent() {
      document.getElementById('myDiv').innerHTML = '';
   }
</script>
</body>
</html>

示例 4：動態生成內容

下面的示例在單擊“生成內容”按鈕時使用 JavaScript 和innerHTML 屬性動態生成內容：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM innerHTML</title>
<style>
   button{
      padding: 8px 10px;
   }
</style>
</head>
<body>
<p>Click the below button to generate content dynamically.</p>
<div id="contentArea">Welcome to TP, you are at the right place to learn..</div>
<br>
<button onclick="generateContent()">Generate Content</button>
<script>
   function generateContent() {
      let count = 5;
      let html = '';
      for (let i = 1; i <= count; i++) {
         html += '<p>Paragraph ' + i + '</p>';
      }
      document.getElementById('contentArea').innerHTML = html;
   }
</script>
</body>
</html>

示例 5：顯示條件內容

以下示例顯示了在單擊“顯示內容”按鈕時如何使用innerHTML 屬性有條件地顯示內容：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM innerHTML</title>
<style>
   button{
      padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below button to show content.</p>
<div id="contentArea">Initial content</div>
<br>
<button onclick="showContent()">Show Content</button>
<script>
   function showContent() {
      let condition = true;
      let content = condition ? '<p>Content is visible</p>' : '';
      document.getElementById('contentArea').innerHTML = content;
   }
</script>
</body>
</html>

示例 6：動態突出顯示文字

以下示例幫助我們瞭解如何使用innerHTML 屬性突出顯示 HTML 元素中的特定文字：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title> 
<style>
   .highlight {
       background-color: yellow;
       font-weight: bold;
   }
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<p>It Highlights the Text dynamically</p>
<div id="myDiv">This text will be highlighted where "inner" occurs.</div>
<br>
<button onclick="highlightText()">Highlight Text</button>
<script>
   function highlightText() {
      let searchText = 'inner';
      let content = document.getElementById('myDiv').innerHTML;
      let highlightedContent = content.replace(new RegExp(searchText,'gi'),'<span class="highlight">$&</span>');
      document.getElementById('myDiv').innerHTML = highlightedContent;
   }
</script>
</body>
</html>

示例 7：動態建立表格

以下示例演示瞭如何使用 HTML 結構動態建立一個 HTML 表格，並在構建後使用innerHTML 屬性顯示該表格：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM innerHTML</title>
<style>
   button{
       padding: 8px 12px;
   }
   table, th, td{
       width: 33%;
       text-align: center;
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to create an HTML table.</p>
<div id="tableContainer">
</div>
<br>
<button onclick="createTable()">Create Table</button>
<script>
   function createTable() {
      let tableHTML = '<table border="1"><tr><th>Name</th><th>Age</th></tr>';
      let data = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Carol', age: 28 }
      ];
      data.forEach(item => {
        tableHTML += `<tr><td>${item.name}</td><td>
        ${item.age}</td></tr>`;
      });
      
      tableHTML += '</table>';
      document.getElementById('tableContainer').innerHTML = tableHTML;
   }
</script>
</body>
</html>

示例 8：根據使用者輸入建立訊息

此示例顯示瞭如何使用innerHTML 屬性根據使用者輸入動態建立訊息：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title>
<style>
   body {
      text-align: center;
   }
   label {
      font-size: 18px; 
   }
   input[type="text"] {
      padding: 8px;
      font-size: 16px;
      border: 1px solid #ccc;
   }
   button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50; 
      border: none; 
      cursor: pointer;
      margin-top :10px;
   }
   button:hover {
      background-color: #45a049;
   }
   #messageBox {
      margin-top: 20px;
      padding: 20px;
      background-color: #f0f0f0;
      border: 1px solid #ccc; 
   }
</style>
</head>
<body>
   <h3>Creates Message based on User Input</h3>
   <h1>Welcome to Tutorialspoint</h1>
   <label for="nameInput">Enter your name:</label>
   <input type="text" id="nameInput">
   <button onclick="createMessage()">Create Message</button>
   <div id="messageBox"></div>
   <script>
      function createMessage() {
         let name = document.getElementById("nameInput").value;
         let message = `<p>Hello <b>${name}</b> ! Welcome to Tutorialspoint.</p>`;
         document.getElementById("messageBox").innerHTML = message;
      }
   </script>
</body>
</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
innerHTML 是 是 是 是 是
html_dom_element_reference.htm
列印頁面
上一頁
下一頁
廣告