要實現點擊加載更多，可以使用Ajax來向后端發起請求獲取更多的數據，然后將數據添加到頁面中。

以下是一個簡單的示例：

HTML部分：

<div id="content">
    <!-- 初始加載的內容 -->
    <p>第一條內容</p>
    <p>第二條內容</p>
    <p>第三條內容</p>
</div>
<button id="load-more">加載更多</button>

JavaScript部分：

// 獲取加載更多按鈕和內容容器
var loadMoreBtn = document.getElementById('load-more');
var contentContainer = document.getElementById('content');

// 定義每次加載的數量和初始偏移量
var batchSize = 3;
var offset = 3;

// 點擊加載更多按鈕時觸發的函數
loadMoreBtn.addEventListener('click', function() {
    // 發起Ajax請求
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'your-api-url?offset=' + offset + '&limit=' + batchSize, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 請求成功時將獲取到的數據添加到內容容器中
            var newContent = JSON.parse(xhr.responseText);
            newContent.forEach(function(item) {
                var p = document.createElement('p');
                p.textContent = item;
                contentContainer.appendChild(p);
            });
            
            // 更新偏移量
            offset += batchSize;
        }
    };
    xhr.send();
});

在上述示例中，首先通過getElementById方法獲取加載更多按鈕和內容容器。然后定義了每次加載的數量和初始偏移量。在點擊加載更多按鈕時，使用XMLHttpRequest對象發起Ajax請求，并將偏移量和加載數量作為參數傳遞給后端API。當請求成功時，將獲取到的數據解析后添加到內容容器中，然后更新偏移量。

需要注意的是，上述示例中的Ajax請求使用了GET方法，你需要根據你的實際情況選擇合適的請求方法和參數傳遞方式。