# DAY34 - JavaScript 67. innerHTML 插入 HTML 標籤

### 透過 JS 語法 - innerHTML 來插入 HTML 標籤:

- 假設我們有一個標籤 div 類別叫做 main:

<div class="main"></div>

- 下列就是透過 innerHTML 語法來插入標籤的過程:

1. 先確定我們建立了一個變數，且指向到了 .main 類別。

let main = document.querySelector(".main");
console.log(main);

2. 使用 **innerHTML** 語法加入文字:

// 指定 main 建立 HTML:

main.innerHTML = `<p>這是一個動態加入的 HTML Elements+ </p>`;

- index 頁面顯示：


- 透過 console 查找 main:


---

### innerHTML 插入，會刪除掉原有的所有標籤元素(覆寫):

- 你可嘗試在原本的 HTML 檔案區塊寫下這段 code
並且儲存，你會發現:

透過 JS 建立的 innerHTML 動態 HTML 並不會被改變
仍好好的顯示在 index 裡頭:

    <div class="main">
      1234
      <h1>Guardians</h1>
      1234
    </div>


---

###### tags: `Re:0 前端工程師之路 - JavaScript - DOM 篇章`