如何更新單個div的html內容？

我相信這是一個非常簡單的問題，但我有多個頁面，每個頁面都有自己的「內容」，頁面導航位於底部。在我開始編寫腳本以生成幾個不同的html文件之前，他們都有頭部，主體和導航頁腳代碼......我怎麼才能只有一個導航頁腳實例，並且鏈接只更新'content' DIV？通過JavaScript更新元素的內容的如何更新單個div的html內容？

來源

2012-07-30 rtheunissen

非常簡單的例子：

<div id="content"></div> 

<script> 
    document.getElementById('content').innerHTML='<b>oh hai</b>'; 
</script>

要做到這一點，當有人點擊一個鏈接，你的功能附加到onclick處理該鏈接，做了更新和然後返回false，以便鏈接不會執行正常的導航。

如果您不想將所有內容加載到單個文件中，則可以使用AJAX動態檢索內容。您可能希望使用像jQuery這樣的庫/框架來簡化AJAX交互的編碼。

來源

2012-07-30 00:35:24 Trott

這可能是過度殺傷，但如果你想抓住一個圖書館來完成一站式技術，我寫了一個名爲Lightning Touch的軟件：http://trott.github.com/LightningTouch/ – Trott 2012-07-30 00:55:15

你可以用AJAX做到這一點。與jQuery一個例子是使用load功能：

http://api.jquery.com/load/

這將取一個給定的URL和它的內容加載到由選擇匹配的元件。

來源

2012-07-30 00:37:38

這可以通過幾種不同的方式解決。您需要一次加載所有可能的內容（加載後可輕鬆訪問內容，但初始加載速度較慢），或者您可以按照用戶的要求異步請求內容。

1）具有硬編碼的所有內容到一個頁面

通過這樣做，你會選擇隱藏頁面上的內容塊：

<div class="content-blocks"> 
    <div class="content" id="content1">...</div> 
    <div class="content" id="content2">...</div> 
    ... 
</div>

然後，每個環節將有事件處理程序將適當的內容加載到主內容元素中。

document.getElementById('content1-link').onclick = function() { 
    document.getElementById('content-box').innerHTML = document.getElementById('content1').innerHTML 
}

2）使內容

爲此AJAX請求，你的各種內容塊將被存儲在外部文件，例如'content1.html'，'content2.html'等。我強烈推薦使用這個方法的AJAX支持的JavaScript庫，因爲它們將處理瀏覽器處理異步請求的差異。有些人，像jQuery，還提供了方便的功能做了這樣的任務：

$('#content1-link').on('click',function(){ 
    $('#content-box').load('/path/to/content1.html'); 
});

3）使用包括報表

該方法具有易於實現第一方案的（不依賴於異步電動機請求），但它將您的內容保存在單獨的文件中，如第二個解決方案。基本上，您可以使用任何類型的服務器/語言支持（例如SSI包括PHP require等）。然後，您可以像第一個選項那樣創建事件處理程序。

來源

2012-07-30 00:50:10 jackwanders

如何更新單個div的html內容？

回答

相關問題