JS 筆記 - 使用 JavaScript 插入 innerHTML

innerHTML

方法：組完字串後，傳進語法進行網頁渲染。
優點：效能快。
缺點：資安風險高，須確保資料來源沒問題。

原本學習的方式是用 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 渲染網頁原本會是這樣寫：

1 2	var el = document.getElementById("main"); el.textContent = "Hello";

這次用 innerHTML 的方式渲染網頁：

1 2	var el = document.getElementById("main"); el.innerHTML = "<h1>innerHTML HELLO</h1>";

結果就會得到 h1 標籤 innerHTML HELLO。

innerHTML 有一個特性，就是會覆蓋原本寫的內容，原本在 id="main"，裡面寫的內容 1234，被更改為 innerHTML HELLO 了。

也可以加上 class 名稱，讓 CSS 吃到效果，就只要按照平常設定 class 的方式，寫在 innerHTML 的標籤裡就可以了。如下：

1 2	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，如下：

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

這時會看到 ul 裡面是沒有 li 的，透過 JS 的將 li 渲染在網頁上，先建立三個要使用的變數：

1
2
3

var el=document.querySelector(.list); //選取到 class="list"
var link="https://www.google.com.tw/"; //a 連結網址
var text="用 JS 渲染 li 的內容在網頁上"; // a 連結文字

這邊在透過 el.innerHTML 的語法建立標籤內容，將其渲染到網頁上，

因為我很怕我會打錯，所以會先在 html 標籤內打好，並且把變數預先要放的位置先用中文放進去，避免等等貼到 JS 搞混了：

1	<li><a href=" 連結變數 "> 文字變數 </a></li>

下方的正確寫法會看到是 html 裡面的語法除了變數外，是用單引號圈起來的，並且變數兩邊用 + 號做連結，所以就會變下方這樣，要確認引號的位置有正確，如果不正確就會無法顯示：

1	el.innerHTML = '<li><a href="' + 變數名稱 + '">' + 變數名稱 + "</a></li>";

最後再把變數名稱更換成預先設定好的變數即可：

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

codepen: https://codepen.io/hnzxewqw/pen/YzXpvwR?editors=1010