為什麼要動態建立元素？

HTML 預設是靜態的，寫死在檔案裡。
但如果我們要：

新增留言

加入待辦清單項目

API 抓回來的資料顯示在網頁上
就需要 JavaScript 動態建立元素。

建立元素：document.createElement()

let newP = document.createElement("p"); // 建立一個 <p>
newP.innerText = "這是新段落";         // 設定內容
document.body.appendChild(newP);        // 插入到 body

👉 結果：網頁最後會多一個段落。

設定屬性：setAttribute / 直接指定

let img = document.createElement("img");
img.setAttribute("src", "https://picsum.photos/200");
img.alt = "隨機圖片"; 
document.body.appendChild(img);

插入位置

預設 appendChild() 會加在最後面。
如果要插在最前面，可以用 prepend()：

let h2 = document.createElement("h2");
h2.innerText = "我是最前面的標題";
document.body.prepend(h2);

也可以用 insertBefore(newNode, referenceNode)：

let ul = document.querySelector("ul");
let li = document.createElement("li");
li.innerText = "新項目";
ul.insertBefore(li, ul.firstChild);

移除元素
方式一：.remove()

let title = document.getElementById("title");
title.remove(); // 直接刪除

方式二：.removeChild()

let list = document.getElementById("list");
let first = list.firstChild;
list.removeChild(first);

🔹 小練習：留言板