JS 使用 textContent 渲染網頁原本會是這樣寫：

var el = document.getElementById("main");
el.textContent = "Hello";
這次用 innerHTML 的方式渲染網頁：
var el = document.getElementById("main");
el.innerHTML = "<h1>innerHTML HELLO</h1>";
結果就會得到 h1 標籤 innerHTML HELLO。
innerHTML 有一個特性，就是會覆蓋原本寫的內容，原本在 id="main"，裡面寫的內容 1234，被更改為 innerHTML HELLO 了。
也可以加上 class 名稱，讓 CSS 吃到效果，就只要按照平常設定 class 的方式，寫在 innerHTML 的標籤裡就可以了。如下：
var el = document.getElementById("main");
el.innerHTML = '<h1 class="blue">innerHTML HELLO</h1>';
codepen： https://codepen.io/hnzxewqw/pen/VwLKxGG
在 JS 中引號的用法很重要，不能混搭使用，以這行為例：

'<h1 class="blue">innerHTML HELLO</h1>'，

倘若改成都是單引號：

'<h1 class='blue'>innerHTML HELLO</h1>'，

電腦會誤認為：

'<h1 class=' + blue + '>innerHTML HELLO</h1>'
所以使用 JS 的引號一定要一致!
透過 innerHTML 的方式在網頁上渲染一個 li 的 a 連結寫法
先建立一個 ul，並且命名一個 class 為 list，如下：
<ul class="list"></ul>
這時會看到 ul 裡面是沒有 li 的，透過 JS 的將 li 渲染在網頁上，先建立三個要使用的變數：
var el=document.querySelector(.list); //選取到 class="list"
var link="https://www.google.com.tw/"; //a 連結網址
var text="用 JS 渲染 li 的內容在網頁上"; // a 連結文字
這邊在透過 el.innerHTML 的語法建立標籤內容，將其渲染到網頁上，
因為我很怕我會打錯，所以會先在 html 標籤內打好，並且把變數預先要放的位置先用中文放進去，避免等等貼到 JS 搞混了：
<li><a href=" 連結變數 "> 文字變數 </a></li>
下方的正確寫法會看到是 html 裡面的語法除了變數外，是用單引號圈起來的，並且變數兩邊用 + 號做連結，所以就會變下方這樣，要確認引號的位置有正確，如果不正確就會無法顯示：
el.innerHTML = '<li><a href="' + 變數名稱 + '">' + 變數名稱 + "</a></li>";
最後再把變數名稱更換成預先設定好的變數即可：
el.innerHTML = '<li><a href="' + link + '">' + text + "</a></li>";
codepen: https://codepen.io/hnzxewqw/pen/YzXpvwR?editors=1010