如何在不使用"src"的情况下将 div 引用到单独的 html？

Question

显然不能将其写成：

<div id="left" src="left.html"></div>

那么你会怎么做呢？

Answer 1

使用jQuery（下面需要完整的代码，但您可能想将jQuery放在html文档头中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="left"></div>
<script type="text/javascript">
$(document).ready(function() { 
  $('#left').load("left.html");
});
</script>

如果你有php，并且更喜欢服务器端的东西：

<div id="left"><?php include("left.html"); ?></div>

或者如其他人所建议的iframe（但老实说，这将是最糟糕的解决方案IMHO

Answer 2

您可以使用<iframe></iframe>插入html:

<iframe src="link.html" width="100%" height="300"></iframe>

Answer 3

使用ajax请求并将<div>的innerHTML属性设置为该html数据。为此推荐Jquery。

$("button").click(function(){
  $.ajax({url:"demo_test.html",success:function(result){
    $("#div1").html(result);
  }});
});

以在单击按钮时将文件demo_test.html的内容加载到div div1。