如何更新单个div的html内容？

Question

我相信这是一个非常简单的问题，但我有多个页面，每个页面都有自己的“内容”，页面导航位于底部。在我开始编写脚本以生成几个不同的html文件之前，他们都有头部，主体和导航页脚代码......我怎么才能只有一个导航页脚实例，并且链接只更新'content' DIV？通过JavaScript更新元素的内容的

Answer 1

非常简单的例子：

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

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

要做到这一点，当有人点击一个链接，你的功能附加到onclick处理该链接，做了更新和然后返回false，以便链接不会执行正常的导航。

如果您不想将所有内容加载到单个文件中，则可以使用AJAX动态检索内容。您可能希望使用像jQuery这样的库/框架来简化AJAX交互的编码。

Answer 2

你可以用AJAX做到这一点。与jQuery一个例子是使用load功能：

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

这将取一个给定的URL和它的内容加载到由选择匹配的元件。

Answer 3

这可以通过几种不同的方式解决。您需要一次加载所有可能的内容（加载后可轻松访问内容，但初始加载速度较慢），或者您可以按照用户的要求异步请求内容。

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等）。然后，您可以像第一个选项那样创建事件处理程序。