How to append current page contents to another page?

Question

I have two HTML pages, one is source page and the other one is copy, I need to pass some div elements into other(copy) page body. I did half way, here I used setTimeOut function to achieve it How it can done without the timeout function? and browser should display the url.

source page:

<html>
    <head>        
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        
        <script>
            function copyCon(){
                
            var p = document.getElementById("1");
            var p_prime = p.cloneNode(true);
            var w    = window.open('printcopy.html');
            
            setTimeout(function(){ 
                w.document.body.appendChild(p_prime);
            }, 1000);
            }
            
        </script>
        
        <button onclick="copyCon()">copy </button>
        <div id = "1" style="width: 500px; height: 500px; border: 1px solid black; position: relative">
            
            <h3> this is a test heading </h3>
            <p style="top: 60px; left: 20px; position: absolute;"> test Paragraph</p>
            
            <input type="text" style="position: absolute; top: 40px; left: 20px"/>
            
        </div>
        
    </body>
</html>

copy:

<html>
    <head>
    </head>
    <body>        
    </body> </html>

and is there any way to access the elements and execute function of copy page?

What is the reason of using ``setTimeOut`` and what URL should be displayed by browser? — Kamil, Aug 27 '15 at 07:04
take a look http://stackoverflow.com/questions/2155122/copy-current-webpage-into-a-new-window or http://stackoverflow.com/questions/22245608/javascript-how-to-copy-div-content-to-another-page — ZaoTaoBao, Aug 27 '15 at 07:13
I'm with @Kamil what the reason of the timeout? I think that your code without timeout should do the job. What happend when you try without the timeout? — frikinside, Aug 27 '15 at 07:31

score 1 · Accepted Answer · answered Aug 28 '15 at 04:50

I found solution myself

function copyCon(){


   var w    = window.open('printcopy.html');
   w.onload = function(){
     var p = document.getElementById("1");
     var p_prime = p.cloneNode(true);
     w.document.body.appendChild(p_prime);
   };
 }

thanks for supporting

score 0 · Answer 2 · answered Aug 27 '15 at 07:50

You can achieve that by using the $.get function (documentation).

In the file you want to append elements from copying (assuming you have a div called div_you_want_to_be_append):

$.get('source.php', function (data) {
    $('#div_you_want_to_be_append').append(data);
});

The best way to avoid new HTML tags, is to include the content you want to copy to a new file in PHP and call include it in the source and call in $.get function (file : source.php in my example)

How to append current page contents to another page?

2 Answers2

Linked