要透過 JS 插入 HTML 標籤有兩種方式，一種是 innerHTML 另一種是 createElement 優缺點如下：

innerHTML

• 方法：組完字串後，傳進語法進行渲染
• 優點：效能快
• 缺點：資安風險，要確保來源沒問題

createElement

• 方法：以 DOM 節點來處理
• 優點：安全性高
• 缺點：效能差

innerHTML 如何使用

之前我們要變更文字內容我們的做法是這樣是使用 textContent 但是如果今天我們希望把標籤也放進去，像是下方這樣的程式碼:

var el = document.querySelector('.main');
el.textContent = "<h1>我是標題</h1>"

這樣也會把 h1 給印出來但是我們只想要有 h1 的效果，這時就要使用 innerHTML 的方法語法如下：

HTML

<h1>消費超過6千可以打九折的顧客</h1>
<ul class="list"></ul>

JS

var el = document.querySelector('.main');
el.innerHTML = "<h1>我是標題</h1>"

innerHTML 程式範例

innerHTML 搭配for迴圈使用

我們拿前面顧客消費狀況的題目來演示，如果要列出消費超過 6000 的顧客使用 innerHTML 搭配 for 迴圈會是這樣的語法：

HTML

<h1>消費超過6千可以打九折的顧客</h1>
<ul class="list"></ul>

JS

var store = [
  {
    customer:'小美',
    amount: 2000,
  },
  {
    customer:'阿丹',
    amount: 10000,  
  },
  {
    customer:'小馬',
    amount: 8000,  
  },
  {
    customer:'妮妮',
    amount: 5000,  
  },
]

//innerHTML 搭配 for迴圈
var el = document.querySelector('.list'); //選取list
var storeLen = store.length ;//抓整個資料內容
var str = "" ; //建立空字串等下要串接起來使用
for(var i=0;i<storeLen;i++){
  if(store[i].amount>6000){
  var content = '<li>'+store[i].customer+'</li>'
  str += content;
  }
}

el.innerHTML = str;

WOW~是否變得有點看不懂了呢？沒關係我這邊稍微說明一下程式的前兩行就是把選取的動作與資料的長度用變數存起來就不用多說了，那 var str = "" 是因為我們要把符合條件的顧客去做累加，所以這樣才先建立一個空字串，再來所謂的 innerHTML 搭配 for 迴圈就是可以看到程式碼第26行

var content = '<li>'+store[i].customer+'</li>'

這一段就是建立一個標籤組合變數的方式兩個單引號包起來是一個標籤，標籤中的內容都要用 + 號去做連接最後再把累加起來的 str 字串用 innerHTML 放進去！

el.innerHTML = str; 

可以直接來這邊看 範例程式碼的成果 到這邊或許感覺到有點複雜，不過是否開始能感覺到我們能夠抓取資料庫的資料，並且動態的改變網頁上的呈現方式呢！

createElement 如何使用

前面的 innerHTML 是直接把標籤與內容都組合好再放進元素內，createElement 則是先創建一個標籤再放內容，在選擇要掛在哪個節點上語法如下：
HTML

<div class="title"></div>

JS

 //建立標籤
var str = document.createElement('h1');
//在標籤內放內容
str.textContent = '我是標題'; 
//用 appendChild 的語法把標籤放在 .title 節點後面
document.querySelector('.title').appendChild(str);

如上面所示先創建了標籤再塞內容，後面使用了新的語法 appendChild 他可以把元素掛在某個節點後面，所以我們就可以在 title 內放入一個 h1 標籤囉！

createElement 範例程式

innerHTML 與 createElement 的不同

使用 innerHTML 原本的標籤內如果有文字的話，JS插入的文字會把原本的文字覆蓋
使用 createElement 不會影響原本的文字，只會在後面去增加。

觀察兩者之間的差異範例

那今天就介紹兩個插入 HTML 標籤的方法囉，明天我們來講講 JavaScript 中的事件。