在網頁開發中，JavaScript是一種非常強大的編程語言，可以用于修改HTML文檔內容。它可以在不刷新頁面的情況下，動態地更新網頁內容，使用戶體驗更加流暢。本文將介紹如何使用JavaScript修改HTML內容，并且會提供實際的案例來加深理解。
修改文本內容
最簡單的HTML內容就是文本內容。我們可以使用JavaScript來修改HTML元素的文本內容。比如，以下代碼將會把id為"demo"的元素的文本內容修改為"Hello JavaScript！"：

<p>// 獲取元素</p>
<p>var element = document.getElementById("demo");</p>
<p>// 修改文本內容</p>
<p>element.innerHTML = "Hello JavaScript！";</p>

實際案例：修改按鈕文本
為了讓用戶體驗更佳，我們經常需要修改按鈕或者鏈接的文本內容。以下是一個實際的案例，通過點擊按鈕切換按鈕文本內容：
HTML代碼：

<p><button id="myButton">點擊我！</button></p>

JavaScript代碼：

<p>var button = document.getElementById("myButton");</p>
<p>button.onclick = function() {</p>
<p>  if (button.innerHTML === "點擊我！") {</p>
<p>    button.innerHTML = "被點擊了！";</p>
<p>  } else {</p>
<p>    button.innerHTML = "點擊我！";</p>
<p>  }</p>
<p>}</p>

當用戶點擊按鈕后，按鈕將會在"點擊我！"和"被點擊了！"之間不斷切換。
修改圖片
除了文本內容，我們還可以修改HTML元素中的圖片。我們可以通過修改img元素的src屬性來改變它所顯示的圖片。比如，以下代碼將會把id為"myImage"的img元素所顯示的圖片修改為"image2.jpg"：

<p>// 獲取元素</p>
<p>var image = document.getElementById("myImage");</p>
<p>// 修改圖片</p>
<p>image.src = "image2.jpg";</p>

實際案例：切換圖片
類似于切換按鈕文本的案例，我們同樣可以通過JavaScript來實現切換圖片。以下是一個實際的案例，通過點擊圖片切換圖片：
HTML代碼：

<p><img id="myImage" src="image1.jpg"></p>

JavaScript代碼：

<p>var image = document.getElementById("myImage");</p>
<p>var images = ["image1.jpg", "image2.jpg", "image3.jpg"];</p>
<p>var index = 0;</p>
<p>image.onclick = function() {</p>
<p>  index++;</p>
<p>  if (index === images.length) {</p>
<p>    index = 0;</p>
<p>  }</p>
<p>  image.src = images[index];</p>
<p>}</p>

當用戶點擊圖片后，圖片將會在images數組中循環切換。
其他HTML元素
除了文本和圖片，我們還可以通過JavaScript來修改HTML元素中的其他內容，例如表格、列表、表單等等。具體的操作方式可以在相關的API文檔中找到。以下是一個案例，在表格中添加新的行：
HTML代碼：

<p><table id="myTable"></p>
<p>  <tr></p>
<p>    <td>1</td></p>
<p>    <td>2</td></p>
<p>    <td>3</td></p>
<p>  </tr></p>
<p></table></p>

JavaScript代碼：

<p>var table = document.getElementById("myTable");</p>
<p>var row = table.insertRow(1);</p>
<p>var cell1 = row.insertCell(0);</p>
<p>var cell2 = row.insertCell(1);</p>
<p>var cell3 = row.insertCell(2);</p>
<p>cell1.innerHTML = "4";</p>
<p>cell2.innerHTML = "5";</p>
<p>cell3.innerHTML = "6";</p>

這段代碼將在表格中添加一行，行中包含三個單元格，分別是"4"、"5"和"6"。
結語
本文介紹了如何使用JavaScript修改HTML內容。不論是文本、圖片、表格，還是其他HTML元素，JavaScript都可以輕松地對其進行修改。通過實際案例，相信讀者已經對JavaScript修改HTML文檔內容有了更深刻的理解。如果想要深入學習，可以在相關的API文檔中找到更多的函數和屬性。