Javascript：我可以使用 JS 将 HTML 元素从一个页面复制到另一个页面吗？

如何解决Javascript：我可以使用 JS 将 HTML 元素从一个页面复制到另一个页面吗？

JS 新手。查了查也没找到好的解决办法，看来应该不会太复杂。

假设我有一个名为 page1.html 的页面，其中包含以下代码：

<div class="page1">
  <div class="wrapper">
    <p>Some text.</p>
  </div>
</div>

现在，我有第二页 page2.html，其中包含以下代码：

<div class="page2">
</div>

我想从 div 创建一个 wrapper 类 page1.html 的副本，并将其插入到 page2.html 中，在 div 类中 page2 {1}}。

两个页面共享同一个 script.js 文件。

我尝试过这样的事情：

page1content = document.querySelector('.wrapper');
page2content = document.querySelector('.page2');
page2content.append(page1content);

但是，我在 page1.html 上遇到错误，因为 js 找不到类 div 的 page2，我在 page2.html 上遇到错误，因为js 找不到类 div 的 wrapper。

我发现了一个类似的问题 here，一些评论建议使用 localStorage。

我对 localStorage 不熟悉，所以我试着做一些研究，并尝试了这样的事情：

在 page1.html 上，我在底部插入了这个脚本：

<script>
  var pageContent = document.querySelector(".page1").innerHTML; 
  sessionStorage.setItem("page1content",pageContent);
</script>

在 page2.html 上，我在底部插入了这个脚本：

<script>
  document.querySelector(".page2").innerHTML=sessionStorage.getItem("page1content");
</script>

它对我不起作用，但也许我用错了。

我也尝试使用 cloneNode()，但同样不确定如何将元素的克隆移植到新页面上，只能移植到我从中克隆的同一页面上。

还有其他方法可以完成我正在尝试做的事情吗？

显然这是一个非常基本的例子；我的实际代码将从第 1 页到第 2 页注入更多内容，但我只是想让这个概念至少发挥作用。

解决方法

我在描述示例中的代码几乎是正确的，我只需将 sessionStorage 更改为 localStorage 就可以了。