1

page 1

     <html>
         <body>
            <h1>My heading</h1>
            <p>Some paragrap</p>
         </body>
     </html>

Page 2

  <html>
      <body>
         <button>Click</button>
         <div></div>
      </body>
   </html>

So when I click the button I want to that page 1 is shown on page 2 between div tag using simple javascript.

Community
  • 1
  • 1
Vishal Mishra
  • 21
  • 4
  • Welcome to Stack Overflow. Try Free Code Camp for resources on how to get started with web development – Mikkel Jan 13 '20 at 05:34
  • You could have a look at this existing answer: [How to load an html inside main index html on button click](https://stackoverflow.com/a/55863120/11700321). Alternatively, you could just use an `` tag and redirect to the 2nd HTML page. – EGC Jan 13 '20 at 05:38
  • check here -> [how do i load an html page in a div using javascript](https://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript) – Swati Jan 13 '20 at 05:40

2 Answers2

1

You can try object tag:

<html>
      <body>
         <button onclick="document.querySelector('div').innerHTML = '<object data='page1.html'></object>'">Click</button>
         <div></div>
      </body>
</html>

while using object tag, note that duplicate <html></html> would not get added

Ritesh Khandekar
  • 3,885
  • 3
  • 15
  • 30
0

You can also add the following JavaScript code in a <script> tag just before your closing </body> tag, assuming your <div> tag on page2 has the id="newpage".

function load(file) {

 document.getElementById("newpage").innerHTML='<object type="text/html" data="page1.html" ></object>';
}

you can then load this function by using onclick as follow:

onclick="load();";

Best of Luck!

Athena
  • 302
  • 4
  • 16