原本學習的方式是用 textContent 語法，在 HTML 上寫上一個 <div> 標籤，裡面的指定一個 id。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="main">1234</div>
</body>
</html>
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 的引號一定要一致!
先建立一個 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
iThome鐵人賽
看影片追技術