时间戳

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

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

问题描述

JS新手。经过研究找不到任何好的解决方案，似乎它不应该太复杂。

假设我有一个page1.html使用此代码调用的页面：

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

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

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

我想从divwith 类中复制一份，并将其插入到with类中。wrapperpage1.htmlpage2.htmldivpage2

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

我试过这样的事情：

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

但是，我收到错误是page1.html因为 js 找不到divwith class page2，并且我收到错误是page2.html因为 js 找不到divwith class wrapper。

我在这里发现了一个类似的问题，并且有几条评论建议使用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 页中注入更多内容，但我只想让这个概念至少发挥作用。

标签： javascripthtmlclone

解决方案

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

推荐阅读