使用 jquery 将整个 html div 从一个页面移动到另一个页面答案

【问题标题】：move an entire html div from one page to another using jquery使用 jquery 将整个 html div 从一个页面移动到另一个页面
【发布时间】：2019-12-03 16:54:38
【问题描述】：

如何使用 jquery 将整个 html div 从一个页面移动到另一个页面这是一个例子：

index.html

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

input.html

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


</div>

当我点击btn 时，我想将#parent1 中的内容移动到#parent2 中的#parent2 页面

任何帮助，请提前谢谢你我已经阅读了这个问题，但它并没有帮助我解决问题

How to move all HTML element children to another parent using JavaScript?

【问题讨论】：

使用 jquery 只能移动同一个文件，不能移动到另一个文件
Javascript 不可能。
你不能真正移动它。您可以在加载时使用 ajax 将部分索引文件插入到 input.html 中
您可能会发现 MDN 文章 How the Web works 很有帮助。它概述了如何提供和呈现 HTML 文件的所有部分。
@VitaliyTerziev OP 明确指出有 2 个不同名称的 html 文件，我们为什么要假设其他情况？

标签： javascript html

【解决方案1】：

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

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

var page_content = document.getElementsByTagName("body")[0].innerHTML;
console.log( page_content );
localStorage.setItem("page_content", page_content );

在第二页检索

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

检查第一页的控制台，确认数据存储成功。

【讨论】：