innerHTML 寫法 (上)

Posted on In

這篇要介紹的是「innerHTML 的用法」

插入 html 標籤

html:

1
<div id="main"></div>

我現在要做的是：

在id="main"裡面，插入一個「<h1></h1> 的 html 標籤」

作法如下：

🎃 建立一個變數el，選取id="main"： var el = document.getElementById('main');

❌ 錯誤寫法：用.textContent插入<h1></h1>

JS:

1
2
3
var el = document.getElementById('main');

el.textContent = '<h1>hello</h1>';

發現：只會顯示出「單純的文字」

原因為：

🎃 網頁上的每個元素，都是一個「節點」

所以，.textContent只是單純去新增一個「文字的節點」而已

✅ 正確寫法：用.innerHTML來新增「html 標籤」

‼️ 要用「單引號」包住「新增的內容」

JS:

1
2
3
var el = document.getElementById('main');

el.innerHTML = '<h1>hello juju</h1>';

🎃 在id="main"裡面，插入一個「<h1></h1> 的 html 標籤」了

.innerHTML會先把「原本的內容給清空」

html:

1
<div id="main">1234</div>

JS:

1
2
3
var el = document.getElementById('main');

el.innerHTML = '<h1>hello juju</h1>'

在id="main"裡面，原本有文字內容「1234」

使用.innerHTML插入「html 標籤」之後，原本的「1234」不見了！

原因為：

🎃 .innerHTML會先把「原本的內容給清空」之後，再插入「新的值」

插入 className

現在，我要做的是：除了插入 html 標籤之外，我還要插入一個 className

html:

1
<div id="main"></div>

🎃 在 css 先寫好一個 className：

1
2
3
.orange{
    color: orange;
}

JS:

‼️ .innerHTML後面，外層已經使用「單引號」了，裡面就必須使用「雙引號」 （否則會“格式錯誤”）

1
2
3
var el = document.getElementById('main');

el.innerHTML = '<h1 class="orange">hello juju</h1>';

🎃 <h1></h1>"就加上class="orange"了

插入兩個“html 標籤”

現在，我要做的是：連續插入兩個<h1></h1>標籤

html:

1
<div id="main"></div>

JS:

🎃 建立另一個變數： var str = '<h1 class="orange">hello juju</h1>';

🎃 用.innerHTML插入兩次str

1
2
3
4
5
var el = document.getElementById('main');

var str = '<h1 class="orange">hello juju</h1>';

el.innerHTML = str + str;

🎃 就會連續插入兩個<h1></h1>標籤了