如何使用javascript将一个html页面上的div内容更改为另一个页面上的div内容？_Javascript_Html_Css

如何使用javascript将一个html页面上的div内容更改为另一个页面上的div内容？

javascript html css

如何使用javascript将一个html页面上的div内容更改为另一个页面上的div内容？,javascript,html,css,Javascript,Html,Css,我想使用TOC中的链接（例如，单击我）将一个页面上div的当前内容替换为另一个页面上div的内容。我想用JavaScript来实现这一点以下是两页中的代码：原始页面（接收新内容）无标题文件函数加载内容（targetPage）{ document.getElementById（“content”）.innerHTML=“New text！”；//如何更改此选项以获取另一个HTML文件中div的内容？ } 这是原始内容源页面 <!doctype html> <htm

我想使用TOC中的链接（例如，单击我）将一个页面上div的当前内容替换为另一个页面上div的内容。我想用JavaScript来实现这一点

以下是两页中的代码：

原始页面（接收新内容）


无标题文件
函数加载内容（targetPage）{
document.getElementById（“content”）.innerHTML=“New text！”；//如何更改此选项以获取另一个HTML文件中div的内容？
}

这是原始内容

源页面

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Content Source</title>
</head>

<body>

<div id="newContent">
    <p>New Content:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Est velit egestas dui id ornare arcu. Ultricies leo integer malesuada nunc vel. Risus sed vulputate odio ut. Senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

</body>
</html>


内容源
新内容：
知识是一种美德，是一种美德，是一种美德，是一种美德。Ultricies lacus sed turpis tincidunt是一种封建制度。这是一次酒后驾车。Ultricies leo integer malesuada nunc vel。这是一场恶作剧。塞内特斯、内特斯和马莱苏阿达是著名的埃吉斯塔斯土尔皮斯人

您可以使用iframe将一个html页面放置在另一个页面中。我将div的内部内容更改为iframe，将html页面作为src。我还添加了一个样式，使iframe与页面大小相同

<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.p2iframe{
width:100%;
height:100%;
float:left;
border:0px;
overflow:hidden;    
}
</style>
<script type= "text/javascript">
function loadContent(){
document.getElementById("content").innerHTML = "<iframe class=\"p2iframe\" src=\"page2.html\" name=\"p2iframe\"></iframe>"; 
}
</script>
</head>
<body>
<div id="link"><a href="#"  onClick="loadContent();">Click Me.</a></div>
<div id="content"><p>This is the original content.</p></div>
</body>
</html>


无标题文件
.p2iframe{
宽度：100%；
身高：100%；
浮动：左；
边界：0px；
溢出：隐藏；
}
函数loadContent（）{
document.getElementById（“内容”）.innerHTML=“”；
}
这是原始内容

我知道这可能不是您想要做的事情-这就是为什么我不写这篇文章作为答案，但是您是否考虑过使用jQuery来简单地更改当前页面上的内容？从我看到的情况来看，您只需要更改一个div的标题和内容（以及div的id），这在jQuery中都是可行的，解决方案可能无法扩展到更大的页面，但它可以避免您使用模板库或尝试使用Ajax调用从其他文件中获取内容。这是完全可能的，但这就像试图从一个圆孔塞进一个方形的钉子。可能的重复是你需要2个html页面还是你只是想改变div的内容？我不想使用iFrame。我想的是这样的：document.getElementByID（“content”）.innerHTML=someOtherDocument.getElementByID（“newContent”）.innerHTML但在这种情况下，如何获得“someOtherDocument”部分？需要Ajax从两个页面中提取。除非您使用iframe、object等语言或其他语言，如php或Ajax。如果有帮助，我可以给您一个Ajax示例。Jonny-一个完整的Ajax示例将非常棒！再问一个问题，让我知道。我可以为您提供一个Ajax答案。

<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.p2iframe{
width:100%;
height:100%;
float:left;
border:0px;
overflow:hidden;    
}
</style>
<script type= "text/javascript">
function loadContent(){
document.getElementById("content").innerHTML = "<iframe class=\"p2iframe\" src=\"page2.html\" name=\"p2iframe\"></iframe>"; 
}
</script>
</head>
<body>
<div id="link"><a href="#"  onClick="loadContent();">Click Me.</a></div>
<div id="content"><p>This is the original content.</p></div>
</body>
</html>