moving html chunks from one page to another

Question

how can i move some html elements from one page to another, I thought JS would do the job if I link both of the html pages to the same Js page but I was wrong I feel It's easy to do but something is missing I can't do it I have searched here on stack overflow and google and I didn't find something that would solve the problem

here is an example:

index.html

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

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

input.html

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


</div>

questions I have read and didn't solve the problem : "Cut and Paste" - moving nodes in the DOM with Javascript

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

and that questions helped me a little bit but it uses the XML and Jquery and I'm not familiar with them is there any easier solution and thank you in advance

Other than the above approach of opening a separate window, you can't accomplish this with javascript alone. You'd be better off doing this server side — Oliver, Jul 24 '19 at 23:45
you'll have to automatically open th second page with `JavaScript` to get control over it. — ThS, Jul 24 '19 at 23:50

StackSlave · Answer 1 · 2019-07-25T03:15:58.833

If you are not using jQuery, which makes this super easy with jQuery.load(), then I would do like:

//<![CDATA[
var doc, bod, get, M, T, I, S, Q, loadIt; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
get = function(url, success, context){
  var x = new XMLHttpRequest;
  var c = context || this;
  x.open('GET', url);
  x.onload = function(){
    if(success)success.call(c, x.responseText);
  }
  x.send();
}
M = function(tag){
  return doc.createElement(tag);
}
T = function(tag){
  return doc.getElementsByTagName(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
loadIt = function(url, selector, loadedFunc){
  var d = M('div'), s;
  d.style.display = 'none'; bod.appendChild(d);
  get(url, function(r){
    d.innerHTML = s = r.replace(/(\n|\r)+|^.*<body>|<\/body>.*$/g, '');
    if(typeof selector === 'string')s = S(selector).outerHTML;
    loadedFunc(s); bod.removeChild(d);
  });
}
loadIt('yourURLHere.html', '#someId', function(res){
  someOtherElement.innerHTML = res;
});
});
//]]>

The loadIt function should do what you want.

score 0 · Answer 2 · answered Jul 25 '19 at 12:20

Try this code, it will work as your wish.

On 1st Page store data into localStorage variable

var page_content = document.getElementById("parent1").innerHTML;
console.log( page_content );
localStorage.setItem("page_content", page_content );

Retrieve 1st page data on 2nd page

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

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

moving html chunks from one page to another

2 Answers2