0%

JS 筆記 - 使用 JavaScript 插入 innerHTML

JavaScript Note

innerHTML

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

原本學習的方式是用 textContent 語法,在 HTML 上寫上一個 <div> 標籤,裡面的指定一個 id

1
2
3
4
5
6
7
8
9
10
11
12
<!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