在現代的網頁開發中，我們經常會遇到需要實時更新頁面內容的需求。而為了實現這一功能，一個非常常見的方法就是使用 Ajax（異步 JavaScript 和 XML）。通過使用 Ajax 技術，我們可以在不刷新整個頁面的情況下，動態地改變特定的 HTML 元素的內容。
下面以幾個代碼案例來詳細解釋說明如何使用 Ajax 來改變 div 元素的內容：
案例一：
<code><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<br>
<div id="myDiv"><h2>原始內容</h2></div>
<br>
<button onclick="changeContent()">點擊改變內容</button>
<br>
<script>
function changeContent() {
$("#myDiv").load("new_content.html");
}
</script>
<br>
</body>
</html></code>在這個案例中，通過點擊按鈕，調用了一個 JavaScript 函數changeContent。這個函數通過使用 jQuery 庫的load()方法，從new_content.html文件中加載了新的內容，并將其替換掉 id 為myDiv的 div 元素內的舊內容。
案例二：
<code><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#changeBtn").click(function(){
$("#myDiv").html("<h2>改變的內容</h2>");
});
});
</script>
</head>
<body>
<br>
<div id="myDiv"><h2>原始內容</h2></div>
<br>
<button id="changeBtn">點擊改變內容</button>
<br>
</body>
</html></code>這個案例中，通過使用 jQuery 的click()方法，當點擊按鈕時，調用了一個匿名函數。這個函數使用 jQuery 的html()方法，將新的內容 "
改變的內容
" 直接插入到 id 為myDiv的 div 元素內，從而改變了 div 的內容。以上兩個案例展示了如何使用 Ajax 技術來改變 div 元素的內容。這一技術非常實用，可以幫助我們實現網頁內容的實時更新，提升用戶體驗。
下一篇php post 解析