1

New to JS. Couldn't find any good solutions for this after researching, and seems like it shouldn't be too complicated.

Say I have a page called page1.html with this code:

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

Now, I have a second page, page2.html, with this code:

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

I want to make a copy of the div with class wrapper from page1.html, and insert it into page2.html, within the div with class page2.

Both pages share the same script.js file.

I tried something like this:

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

However, I'm getting errors on page1.html because the js can't find the div with class page2, and I'm getting errors on page2.html because the js can't find the div with class wrapper.

I found a similar question here, and a couple comments suggest using localStorage.

I am unfamiliar with localStorage so I tried to do some research, and tried something like this:

On page1.html I inserted this script at the bottom:

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

On page2.html I inserted this script at the bottom:

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

It didn't work for me, but perhaps I used it incorrectly.

I also tried to use cloneNode(), but again, wasn't sure how to transplant the clone of the element onto a new page, only onto the same page I'm cloning from.

Is there another way to accomplish what I'm trying to do?

Obviously this is a very basic example; my actual code will be pumping in much more content from page 1 to page 2, but I just want to get the concept working at least.

Katie Reynolds
  • 317
  • 2
  • 16
  • 1
    LocalStorage only stores for the domain origin so if the two pages don't share an origin it won't be available. So make sure the testing environment your using has the same origin. Also the localStorage solution requires you to visit page1 first. It might be worth thinking about using a server side solution. – Graeme Niedermayer Apr 08 '21 at 21:59
  • When you say "share an origin," if my two pages both exist within the same domain, in the same folder, that should count, no? – Katie Reynolds Apr 08 '21 at 22:04
  • 1
    If they are on the same domain, it's fine. - To avoid the errors add checks if the nodes you wanna change exists and execute only the routines if the they are found. Something like `if (document.querySelector(".page2")) { document.querySelector(".page2").innerHTML = ... }` will do it. – Christopher Apr 08 '21 at 22:12
  • 1
    If they (page1 and page2) are rendering at a different time you can use [this](https://usefulangle.com/post/356/javascript-detect-element-added-to-dom) to call your function and remember that the elements can have event listeners so if you need to clone with events see [this](https://pawelgrzybek.com/cloning-dom-nodes-and-handling-attached-events) – Ivan Ganchev Apr 08 '21 at 22:23
  • If it does a full reload of page1 and page2, i dont think you can access any elements from either page if they are not on the page, without using any kind of storage. – user663976 Apr 08 '21 at 22:34
  • 1
    Yup, they should be! one mistake I've ran into in the past is `127.0.0.1:8000` is not the same origin as `localhost:8000`. Also if your using separate windows use `localStorage` rather than `sessionStorage` – Graeme Niedermayer Apr 08 '21 at 22:36
  • Add some console logging on each of your pages, checking you have what you expect at each step. Also can you elaborate further on "it didn't work". Any console errors? – Jon P Apr 08 '21 at 22:47
  • 1
    I'm not sure about the purpose of this, but may be you could create the divs from JS on both pages. Instead of selecting and creating on only one of them. Unless the content is changing dynamically, but still then, copy the smallest part possible, not the whole structure. – Eloi Apr 08 '21 at 23:47
  • @Eloi that's not a half-bad idea, I would love to set it up that way instead. The thing is, both pages won't have the exact same content. On the main page I want to have div's for a bunch of blog posts. But on the second page I want to show only the posts with a class of, for example, "april2021". So I may not be able to do it that way. I'll think about it a little more though and see if I can make it work. Thanks for your suggestion! – Katie Reynolds Apr 09 '21 at 00:50
  • @GraemeNiedermayer changing from ```sessionStorage``` to ```localStorage``` did the trick for me! Thank you so much! – Katie Reynolds Apr 09 '21 at 01:14

1 Answers1

0

The code I had in my example in the description was almost correct, I just had to change sessionStorage to localStorage and it worked.

Katie Reynolds
  • 317
  • 2
  • 16