Include HTML page into another HTML div not working

Question

Ok - this is driving me bonkers. Such a simple load but nothing is happening. Any ideas how I can resolves this? Ideally I would like to create components ( header / footer / etc) to reuse across all.

Here is the HTML I am using for a test.

<html>

<head>
 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

 <script>
   $(document).ready(function() {
     $("#included-page").load("test.html");
   });
 </script>

</head>

<body>
 <div id="included-page"></div>
 <!-- insert page 2 test -->
 <h1>This Page 1</h1>
</body>

</html>

And here is the test page I am trying to load

<!doctype html>
<html>
<head>
</head>
<body>
<p>Included from page test</p>
</body>
</html>

Answer 1

I would find using an include statement easier, because no javascript is needed:

<html>

<head>
 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

 <script>
   $(document).ready(function() {
     $("#included-page").load("test.html");
   });
 </script>

</head>

<body>

 <!--#include virtual="test.html"-->

 <h1>This Page 1</h1>
</body>

</html>

Note: that is not a comment, but include statements have the same format as HTML comments.

Include HTML page into another HTML div not working

Question

1 answers

solution1
0 2020-04-07 12:40:38

Include HTML page into another HTML div not working

Question

1 answers

solution1 0 2020-04-07 12:40:38

solution1
0 2020-04-07 12:40:38