在頁面中，JavaScript可以輕松地改變HTML的內(nèi)容。例如，我們可以使用JavaScript來更改文本、圖像、表單等等。

想象一下，在一個網(wǎng)站上有一個按鈕，點擊這個按鈕可以更改頁面上的標(biāo)題。我們可以將這個按鈕的HTML元素標(biāo)記為id="title-btn"，并使用JavaScript來選擇這個元素并更改其內(nèi)容：

document.getElementById("title-btn").addEventListener("click", function() {
document.getElementById("page-title").innerHTML = "新的頁面標(biāo)題";
});

以上代碼將在"id"為"title-btn"的元素上添加一個點擊事件的監(jiān)聽器，當(dāng)按鈕被點擊時，頁面標(biāo)題（id為"page-title"的元素）的內(nèi)容將被更改為"新的頁面標(biāo)題"。

除了文本，我們也可以使用JavaScript更改圖像。假設(shè)網(wǎng)頁上有一個標(biāo)簽顯示了一張圖片，可以使用標(biāo)簽的"src"屬性更改圖片的源路徑：

document.getElementById("img-btn").addEventListener("click", function() {
document.getElementById("my-image").src = "new-image.png";
});

以上代碼將在"id"為"img-btn"的元素上添加一個點擊事件的監(jiān)聽器，當(dāng)按鈕被點擊時，"my-image"的源路徑將被更改為"new-image.png"。

在表單中，我們可以使用JavaScript直接更改表單元素的值，如下所示：

document.getElementById("name-btn").addEventListener("click", function() {
document.getElementById("name-input").value = "新的名稱";
});

以上代碼將在"id"為"name-btn"的元素上添加一個點擊事件的監(jiān)聽器，當(dāng)按鈕被點擊時，"name-input"的值將被更改為"新的名稱"。

除了更改特定元素的內(nèi)容或?qū)傩酝?，JavaScript還可以在HTML文檔中添加或刪除元素。例如，我們可以使用HTML頁面上的按鈕添加新的段落元素：

document.getElementById("add-para-btn").addEventListener("click", function() {
var newPara = document.createElement("p");
var paraText = document.createTextNode("這是新段落的文本。");
newPara.appendChild(paraText);
var parentDiv = document.getElementById("content");
parentDiv.appendChild(newPara);
});

以上代碼將在"id"為"add-para-btn"的元素上添加一個點擊事件的監(jiān)聽器，當(dāng)按鈕被點擊時，一個新的

元素將被創(chuàng)建，其中包含一段文本。然后，這個新的元素將被添加到一個已經(jīng)存在于頁面上的容器中（id為"content"的元素）。

JavaScript的能力不止于此。使用JavaScript，我們可以輕松地操縱HTML，并實現(xiàn)網(wǎng)站中各種復(fù)雜的交互效果。