move an entire html div from one page to another using jquery

Question

how can i move an entire html div from one page to another using jquery here is an example :

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>

I want when I click on the btn I move what is inside #parent1 to the #parent2 that is in the input.html page

any help please and thank you in advance I have read that question but it didn't help me solve the problem

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

You can move only on same file not to another file using jquery — Rishab, Jul 25 '19 at 12:01
You can't really move it. You could use ajax to insert part of your index file into input.html when it loads — charlietfl, Jul 25 '19 at 12:06
You may find the MDN article [How the Web works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works) helpful. It gives an overview _how_ all the parts of serving and rendering a HTML file work. — Tigger, Jul 25 '19 at 12:08
@Tigger. Anurag you are taking this literally, he want's to populate a div with other div, it is just so happens that those are in different files. I doubt the OP thinks that client-side JavaScript can change file contents and what's the point in doing so (if this is really the case)? — Vitaliy Terziev, Jul 25 '19 at 12:21
@VitaliyTerziev OP clearly stated there there are 2 html files with different names, why should we assume otherwise? — Anurag Srivastava, Jul 25 '19 at 12:30

score 0 · Answer 1 · answered Jul 25 '19 at 12:17

Try this code, it will work as your wish.

On 1st Page store data into localStorage variable

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

Retrieve on 2nd page

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

Check console on 1st page for confirmation data storing successfully.

move an entire html div from one page to another using jquery

1 Answers1