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

【问题标题】：Javascript: Can I Use JS to Copy an HTML Element From One Page to Another?Javascript：我可以使用 JS 将 HTML 元素从一个页面复制到另一个页面吗？
【发布时间】：2021-07-04 19:36:43
【问题描述】：

JS 新手。研究了一下没找到好的解决办法，好像应该不会太复杂。

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

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

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

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

我想从page1.html 复制div 类wrapper，并将其插入page2.html，在div 类page2 内。

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

我尝试过这样的事情：

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

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

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

【问题讨论】：

LocalStorage 仅存储域来源，因此如果两个页面不共享来源，它将不可用。因此，请确保您使用的测试环境具有相同的来源。此外，localStorage 解决方案要求您先访问 page1。使用服务器端解决方案可能值得考虑。
如果他们在同一个域中，那很好。 - 为避免错误添加检查您要更改的节点是否存在，如果找到它们则仅执行例程。像if (document.querySelector(".page2")) { document.querySelector(".page2").innerHTML = ... } 这样的东西可以做到。
如果它们（page1 和 page2）在不同的时间呈现，您可以使用 this 调用您的函数并记住元素可以具有事件侦听器，因此如果您需要使用事件进行克隆，请参阅 @ 987654323@
是的，他们应该是！我过去遇到的一个错误是127.0.0.1:8000 与localhost:8000 的来源不同。此外，如果您使用单独的窗口使用 localStorage 而不是 sessionStorage
我不确定这样做的目的，但也许你可以在两个页面上从 JS 创建 div。而不是仅在其中一个上选择和创建。除非内容是动态变化的，否则，尽可能复制最小的部分，而不是整个结构。

标签： javascript html clone

【解决方案1】：

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

【讨论】：