首页 > 解决方案 > 将 html 块从一个页面移动到另一个页面

问题描述

我如何将一些 html 元素从一个页面移动到另一个页面,我认为如果我将两个 html 页面链接到同一个 Js 页面,JS 就可以完成这项工作,但我错了,我觉得这很容易做到,但我可以'不这样做我在这里搜索了堆栈溢出和谷歌,但没有找到可以解决问题的东西

这是一个例子:

索引.html

<div id="parent1" class="container">
  <h1>text</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    <span class="icon">icon</span></p>
</div>
<a href="#" class="btn">click me</a>

我想要当我点击 btn我将里面#parent1的内容移动到页面#parent2中的内容时input.html

输入.html

<div id="parent2" class="con">


</div>

我已阅读但未解决问题的问题:“剪切和粘贴” - 使用 Javascript 在 DOM 中移动节点

如何使用 JavaScript 将所有 HTML 元素子元素移动到另一个父元素?

这些问题对我有一点帮助,但它使用 XML 和 Jquery,我不熟悉它们有没有更简单的解决方案,提前谢谢你

标签: javascripthtml

解决方案


试试这个代码,它会如你所愿。

在第一页将数据存储到 localStorage 变量中

var page_content = document.getElementById("parent1").innerHTML;
console.log( page_content );
localStorage.setItem("page_content", page_content );

在第 2 页上检索第 1 页数据

document.getElementById("parent2").innerHTML = localStorage.getItem("page_content");
console.log( page_content );

打开控制台以在第一页成功存储确认数据。


推荐阅读