使用 JavaScript 从另一个页面获取内容

*发表于 2022-5-6 13:43:18* · 发表于 2022-5-6 13:43:18

问题
如何使用 JavaScript 将 div 从第 2 页加载到第 1 页。

第2页.html

<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content2"> this is content2</div>
<div id="content3"> this is content3</div>
</div>
</body>
</html>

复制代码

我想从 page2 获取并使用 id content2 使用该 div 的内容创建一个到 page1 的 div，单击并删除链接后，对 content3、content4 和连续执行相同的操作。

第1页.html

<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<a href="#"> get content</a>
</div>
</body>
</html>

复制代码

就是这样。

<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<div>this is content2</div>
<div>this is content3</div>
</div>
</body>
</html>

复制代码

我是 JavaScript 新手，我不知道该怎么做。如果有人可以提供帮助。谢谢。

编辑：如果真的可能的话，我想要一种只使用没有 jquery 的 javascript 的方法。我想让我的项目离线工作，我不能用 jquery 来做，因为它不起作用。我已经下载了 jquery 插件并将其粘贴到我的目录中，但是它也不起作用。

回答
您可以使用 JavaScript、jQuery 和 AJAX 的组合来执行此操作。

首先，包含 jQuery 库：

<script src=>//code.jquery.com/jquery-1.10.2.js></script>

然后编写一个类似的 JavaScript 函数，将 div 元素的 html 内容替换为 Page2.html 文件：

var loadNewContent = function {
$.ajax("Page2.html", {
success: function(response) {
$("#content2").html(response);
}
});
};

复制代码

然后是一些“触发”需要运行此函数，例如：

$("#content2").on('click', loadNewContent);

[软件设计/软件工程] 使用 JavaScript 从另一个页面获取内容

相关内容