innerHTML 寫法（下）

當我在 JS 需要「字串+變數」來“賦予值”時，常常會讓程式碼看起來很亂

因此，這章節要講解的是：組字串的技巧

html:
🎃 <ul></ul>裡面是「空值」

1	<ul class="list"></ul>

JS:

🎃 建立一個變數el，選取.list： var el = document.querySelector('.list');

🎃 用.innerHTML插入一個「<li></li>」

1
2
3

var el = document.querySelector('.list');

el.innerHTML = '<li>hello</li>';

但是，如果我需要插入的是

「a連結」
「a連結」裡面有「文字」
「文字」裡面要帶入「變數」

🎃 當「要插入的內容」很長一串時，就可以用「變數」來做切割

例如

原本的寫法是這樣：

1
2
3

var el = document.querySelector('.list');

el.innerHTML = '<li><a href="https://www.tripadvisor.com.tw">查理</a></li>';

我想要插入的字串是「'<li><a href="https://www.tripadvisor.com.tw">查理</a></li>'」

這麼長的一個字串，我希望可以縮短它作法如下：

🍎 把「連結」撈出來，用變數來取代

🍎 把「文字內容」撈出來，用變數來取代

JS:

🎃 建立兩個變數：

「連結」： var link = 'https://www.tripadvisor.com.tw';
「文字內容」： var name = '查理';

🎃 將「連結、文字內容」用「變數」帶進去

在.innerHTML的「=」後面：

🍋 最外層的「字串」–> 要用一個「單引號」包住

🍋 字串裡面的「值」–> 要使用「雙引號」包住，例如 `href=" "`

接下來，要將'<li><a href="https://www.tripadvisor.com.tw">查理</a></li>'切成幾個等份：

🔔 帶入「變數`link`」

🍋 把原本的連結（https://www.tripadvisor.com.tw）用「'+ link +'」來取代

就會變成「字串 + 變數 + 字串」：
🍋 字串 '<li><a href="'
🍋 變數 link
🍋 字串 '">查理</a></li>'

1	el.innerHTML = '<li><a href="'+ link +'">查理</a></li>';

🔔 帶入「變數`name`」

🍋 把原本的文字內容（查理）用「'+ name +'」來取代

1	el.innerHTML = '<li><a href="'+ link +'">'+ name +'</a></li>';

🎃 完整 JS:

var el = document.querySelector('.list');

var link = 'https://www.tripadvisor.com.tw';
var name = '查理';


el.innerHTML = '<li><a href="'+ link +'">'+ name +'</a></li>';

可以看到，「連結、文字內容」都有帶進去裡面了