前面我們講到選取了元素，也講到了設定屬性和讀取屬性，但倘若我們想要在某個元素下再新增元素且有內容時，可以怎麼做？
這裡就介紹其中一種方法 .innerHTML 也順便試著組字串

先假設我們的頁面上有一個

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

而我們要在 .list 底下新增 li 元素，這時候可以這樣寫:

var el = document.querySelector('.list');
el.innerHTML = '<li>Item01</li>';

這時候我們看頁面時，結構會呈現如下:

<ul class="list">
    <li>Item01</li>
</ul>

這是比較簡單的方式，倘若我們今天想要新增 a 元素並設定 href 連去 https://www.google.com.tw/
這時候就會如下:

el.innerHTML = '<li><a href="https://www.google.com.tw/">Item01</a></li>';

這裡比較要注意的是單雙引號的運用，我們要避免單雙引號交錯使用，而是要巢狀使用，不然字串的組合上會出錯
例如不可以:

el.innerHTML = '<li><a href="https://www.google.com.tw/'>Item01</a></li>";

這樣交錯使用會使字串組合上出錯，如果為了方便統一使用單引號或者雙引號:

el.innerHTML = "<li><a href="https://www.google.com.tw/">Item01</a></li>";

這樣也會出現錯誤，因為程式判斷上無從得知哪裡是開始哪裡是結束
如果跟第一次的寫法一樣，但單雙引號交換使用呢？

el.innerHTML = "<li><a href='https://www.google.com.tw/'>Item01</a></li>";

答案是可以的，把握一個原則就可以了，那就是巢狀使用，跟 HTML 標籤一樣
搭配變數來組合字串試試看吧:

var link = 'https://www.google.com.tw/';
var str =  'Item01';
el.innerHTML = '<li><a href="'+ link +'">'+ str +'</a></li>';

上面組合出來的字串會跟

el.innerHTML = '<li><a href="https://www.google.com.tw/">Item01</a></li>';

一樣，字串的組合上單雙引號的運用要頗為小心，可以試著組合看看，對後面要組合多筆資料並加入到頁面的 HTML 上會有比較多的了解