问题
如何使用 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);
|