本文主要介紹了Ajax中如何通過控制文檔結構來實現動態更新頁面內容的功能。Ajax是一種在不刷新整個頁面的情況下更新部分頁面內容的技術，它通常使用異步HTTP請求來實現。通過Ajax，我們可以實現在文檔中添加、刪除或修改元素，從而實現頁面內容的動態更新。

例如，我們可以使用Ajax來實現一個簡單的待辦事項列表，用戶可以通過一個表單添加新的待辦事項，并通過Ajax請求將該事項添加到列表的末尾。代碼如下：

<script>
// 獲取表單元素和列表元素
var form = document.getElementById('todoForm');
var list = document.getElementById('todoList');
// 監聽表單提交事件
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
// 獲取輸入框的值
var todo = document.getElementById('todoInput').value;
// 創建一個新的待辦事項
var newTodo = document.createElement('li');
newTodo.textContent = todo;
// 將新的待辦事項添加到列表中
list.appendChild(newTodo);
});
</script>

在上面的例子中，用戶通過一個表單輸入待辦事項的內容，然后通過監聽表單的提交事件，在該事件處理函數中獲取輸入框的值，創建一個新的待辦事項元素，并將其添加到待辦事項列表中。這樣，當用戶提交表單時，新的待辦事項就會被添加到頁面中，實現了動態更新頁面內容的效果。

Ajax不僅可以用來添加新的元素，還可以用來刪除或修改已經存在的元素。例如，我們可以使用Ajax來實現一個簡單的購物車功能，用戶可以通過點擊按鈕將商品添加到購物車中，并在購物車中顯示商品的數量和總價。代碼如下：

<script>
// 獲取添加按鈕元素和購物車元素
var addButton = document.getElementById('addButton');
var cart = document.getElementById('cart');
// 初始化購物車的商品數量和總價
var quantity = 0;
var total = 0;
// 監聽添加按鈕的點擊事件
addButton.addEventListener('click', function() {
// 假設每個商品的價格為10元
var price = 10;
// 更新購物車的商品數量和總價
quantity++;
total += price;
// 更新購物車中的顯示內容
cart.textContent = '數量：' + quantity + '，總價：' + total + '元';
});
</script>

在上面的例子中，用戶點擊添加按鈕時，商品的數量和總價會根據商品價格進行更新，并將新的內容顯示在購物車中。這樣，用戶就可以通過點擊按鈕來添加商品，并在購物車中實時看到商品的數量和總價的變化。

總之，通過控制文檔結構，我們可以使用Ajax來實現動態更新頁面內容的功能。無論是添加、刪除還是修改元素，Ajax都能幫助我們實現頁面內容的動態更新，提升用戶體驗。