Javascript 简单jQuery.load示例不起作用_Javascript_Jquery

Javascript 简单jQuery.load示例不起作用

javascript jquery

Javascript 简单jQuery.load示例不起作用,javascript,jquery,Javascript,Jquery,我确信这是一个相当基本的问题，但我对jQuery还比较陌生，所以我希望有人能帮助我基本上，我需要将HTML片段加载到页面中。当代码段仅包含HTML时，这种方法可以很好地工作，但当它包含脚本时则不行为了清晰起见，我把代码精简到了最低限度。这是index.html： <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/j

我确信这是一个相当基本的问题，但我对jQuery还比较陌生，所以我希望有人能帮助我

基本上，我需要将HTML片段加载到页面中。当代码段仅包含HTML时，这种方法可以很好地工作，但当它包含脚本时则不行

为了清晰起见，我把代码精简到了最低限度。这是index.html：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>    
</head>
<body>
<h1>Heading</h1>
<div id="banner"></div>
<script>
$(document).ready(function(){
    $('#banner').load('banner.html');
});
</script>

</body>
</html>


标题
$（文档）.ready（函数（）{
$（'#banner'）.load（'banner.html'）；
});

而banner.html仅包含以下内容（作为示例）：

副标题
document.write（'Hello'）；

脚本已执行，但出于某种原因，它会删除index.HTML和banner.HTML中的其余HTML（即，它只显示“Hello”而不显示其他内容）

非常感谢您的帮助

document.write

在页面加载写入文档后，同时覆盖文档中当前的所有内容，这就是为什么最后只显示字符串“hello”

只需删除文档即可写入：

<h2>Subheading</h2>
<p id="test"></p>
<script>
    document.getElementById('test').innerHTML = 'hello';
</script>

副标题

document.getElementById（'test'）.innerHTML='hello'；

文档。在页面加载写入文档后写入

，同时覆盖文档中当前的所有其他内容，这就是为什么最后只显示字符串“hello”

只需删除文档即可写入：

<h2>Subheading</h2>
<p id="test"></p>
<script>
    document.getElementById('test').innerHTML = 'hello';
</script>

副标题

document.getElementById（'test'）.innerHTML='hello'；

这是因为加载banner.html时使用的。。执行banner.html中的脚本，该脚本在您的文档中写入“hello”（这里的文档是您的整个index.html）

理解这一点的一种方法是替换banner.html的某些内容，而不是整个文档

banner.html

<h2>Subheading</h2>
<div id="divID"></div>
<script>
  $('#divID').html('hello');  //using jquery .. gets the element with id as divID and replace the HTML 
 </script>

副标题
$（'#divID'）.html（'hello'）//使用jquery。。获取id为divID的元素并替换HTML

在这里，我只替换id为“divID”的div，而不是替换enrite文档，这是因为加载banner.html时会用到它。。执行banner.html中的脚本，该脚本在您的文档中写入“hello”（这里的文档是您的整个index.html）

理解这一点的一种方法是替换banner.html的某些内容，而不是整个文档

banner.html

<h2>Subheading</h2>
<div id="divID"></div>
<script>
  $('#divID').html('hello');  //using jquery .. gets the element with id as divID and replace the HTML 
 </script>

副标题
$（'#divID'）.html（'hello'）//使用jquery。。获取id为divID的元素并替换HTML

这里我只替换id为“divID”的div，而不是替换enrite文档