JavaScript - 變更 HTML

你好，未來的 JavaScript 巔峰大師！歡迎來到我們探索動態網頁世界的刺激旅程。今天，我們將要探討 JavaScript 如何發揮魔法，即時更改 HTML。請繫好安全帶，因為在這堂課結束之前，你將能夠讓你的網頁隨著你的節奏起舞！

使用 JavaScript 變更 HTML

在我們深入之前，讓我們花一會兒時間欣賞我們即將運用的力量。想像你是一位畫家，你的 HTML 是你的畫布。JavaScript 就像一把神奇的畫筆，可以改變顏色、添加新的元素，甚至立即擦除你的繪畫的一部分。酷炫吧？

現在，讓我們看看我們可以如何使用 JavaScript 變更我們的 HTML。

使用 innerHTML 屬性更改 HTML

innerHTML 屬性就像是通往 HTML 元素內容的窗口。它讓我們能夠窺視其內容，甚至更改它。讓我們從一個簡單的例子開始：

<div id="myDiv">Hello, World!</div>

<script>
document.getElementById("myDiv").innerHTML = "Hello, JavaScript!";
</script>

在這個例子中，我們告訴 JavaScript 找到 id 為 "myDiv" 的元素，並將其內容更改為 "Hello, JavaScript!"。這就像我們使用神奇的畫筆擦除 "Hello, World!" 並寫上新東西。

使用 outerHTML 屬性更改 HTML

當 innerHTML 更改元素內容時，outerHTML 會進一步替換整個元素，包括它的標籤。這是它的運作方式：

<p id="myParagraph">This is a paragraph.</p>

<script>
document.getElementById("myParagraph").outerHTML = "<h2>This is now a heading!</h2>";
</script>

在這個例子中，我們不僅改變了文字，我們還將 <p> 標籤轉換成了 <h2> 標籤。這就像將毛毛蟲變成了蝴蝶！

使用 replaceWith() 方法替換 HTML 元素

replaceWith() 方法是替換元素的另一種方式。它就像是 outerHTML 的更靈活版本。讓我們看看它是如何運作的：

<div id="oldDiv">I'm feeling old.</div>

<script>
let oldDiv = document.getElementById("oldDiv");
let newDiv = document.createElement("div");
newDiv.innerHTML = "I'm fresh and new!";
oldDiv.replaceWith(newDiv);
</script>

在這裡，我們創建了一個全新的 <div>，給它一些內容，然後用它來替換我們的舊 <div>。這就像將你的舊車換成了閃亮的新車！

變更 HTML 元素屬性的值

有時候，我們不需要更改整個元素，只需要更改它的某個屬性。JavaScript 也讓這件事變得很簡單：

<img id="myImage" src="old-image.jpg" alt="An old image">

<script>
document.getElementById("myImage").src = "new-image.jpg";
document.getElementById("myImage").alt = "A brand new image";
</script>

在這個例子中，我們更改了我們圖片的 src 和 alt 屬性。這就像給你的個人頭像快速更新！

向 HTML 元素中添加新的元素

現在，讓我們學習如何向我們的頁面添加完全新的元素：

<ul id="myList">
<li>First item</li>
<li>Second item</li>
</ul>

<script>
let newItem = document.createElement("li");
newItem.innerHTML = "Third item";
document.getElementById("myList").appendChild(newItem);
</script>

在這裡，我們創建了一個新的 <li> 元素，給它一些內容，然後將它添加到我們的列表中。這就像給你的群體照片添加一位新朋友！

從 HTML 元素中移除子元素

有時候，我們需要從我們的頁面中移除元素。這是我們如何做到這一點：

<ul id="myList">
<li>Item to keep</li>
<li id="removeMe">Item to remove</li>
<li>Another item to keep</li>
</ul>

<script>
let list = document.getElementById("myList");
let itemToRemove = document.getElementById("removeMe");
list.removeChild(itemToRemove);
</script>

在這個例子中，我們在我們的列表中找到一個特定的項目並移除它。這就像從你的待辦事項列表中勾選一項！

使用 document.write() 方法

最後，讓我們看看 document.write() 方法。這是一個強大的工具，但請謹慎使用：

<script>
document.write("<h1>Hello, World!</h1>");
</script>

這個方法直接寫入 HTML 輸出。這就像有一條直接連接到網頁的直線！然而，請小心 - 如果你在使用 document.write() 後頁面已經完成加載，它會覆蓋整個頁面。

這裡是一個總結我們所涵蓋的所有方法的表格：

方法	描述
innerHTML	更改元素內部的內容
outerHTML	替換整個元素，包括它的標籤
replaceWith()	用新的元素替換元素
變更屬性	修改元素的特定屬性
appendChild()	添加新的子元素
removeChild()	移除子元素
document.write()	直接寫入 HTML 輸出

記住，能力越強，責任越大。這些工具給你創建動態、互動式網頁的能力，但總是要考慮你的更改會如何影響用戶體驗。

練習這些方法，嘗試不同的組合，很快你就能創建有互動性的網頁。快樂編程，願你的 JavaScript 旅程充滿樂趣和發現！

Credits: Image by storyset