JavaScript 作為一種前端語言，具有非常強大的功能，其中修改內容是常見的任務之一。在開發中，經常需要根據用戶的需求動態更新頁面上的內容，這些內容可以是文本、圖片、圖表或形狀等各種元素。下面將從幾個常見的場景出發，介紹如何使用 JavaScript 修改內容。

一、修改文本內容

<!-- HTML 代碼 -->
<p id="myParagraph">這是一個要修改的段落。</p>
// JavaScript 代碼
var paragraph = document.getElementById("myParagraph");
paragraph.innerHTML = "這是修改后的段落內容。";

在上述代碼中，首先使用 document.getElementById 方法獲取 id 為 myParagraph 的元素，并將其保存在變量 paragraph 中。接著，使用 innerHTML 屬性將元素的文本內容修改為“這是修改后的段落內容。”

二、修改屬性值

<!-- HTML 代碼 -->
<img id="myImage" src="oldImage.jpg" alt="舊圖片" width="200" height="150">
// JavaScript 代碼
var image = document.getElementById("myImage");
image.src = "newImage.jpg";
image.alt = "新圖片";
image.width = 300;
image.height = 200;

在上述代碼中，首先使用 document.getElementById 方法獲取 id 為 myImage 的圖片元素，并將其保存在變量 image 中。接著，分別使用 src、alt、width 和 height 屬性修改圖片的路徑、描述、寬度和高度。

三、創建新元素

// JavaScript 代碼
var newHeading = document.createElement("h1");
var headingText = document.createTextNode("這是一個新的標題");
newHeading.appendChild(headingText);
var parentElement = document.getElementById("parentElement");
parentElement.appendChild(newHeading);

在上述代碼中，首先使用 document.createElement 方法創建一個新的 h1 元素，并保存在變量 newHeading 中。接著，使用 document.createTextNode 方法創建一個包含文本“這是一個新的標題”的文本節點，并將其保存在變量 headingText 中。然后，使用 appendChild 方法將文本節點添加到新的 h1 元素中。最后，使用 document.getElementById 方法獲取 id 為 parentElement 的元素作為新元素的父級元素，并使用 appendChild 方法將新元素添加到指定的父級元素中。

四、刪除元素

<!-- HTML 代碼 -->
<div id="myDiv">
<h2>要刪除的標題</h2>
<p>要刪除的段落。</p>
</div>
// JavaScript 代碼
var divElement = document.getElementById("myDiv");
var headingElement = divElement.getElementsByTagName("h2")[0];
var paragraphElement = divElement.getElementsByTagName("p")[0];
divElement.removeChild(headingElement);
divElement.removeChild(paragraphElement);

在上述代碼中，首先使用 document.getElementById 方法獲取 id 為 myDiv 的元素，并將其保存在變量 divElement 中。接著，使用 getElementsByTagName 方法獲取 divElement 中的 h2 和 p 元素，并分別將它們保存在變量 headingElement 和 paragraphElement 中。然后，使用 removeChild 方法將這兩個元素從 divElement 中刪除。

總之，JavaScript 中修改內容是前端開發中非常常見的任務之一，它可以實現頁面的動態更新和實時響應。本文介紹了幾個常見的場景，希望能夠對讀者提供幫助。