how to include another html file as contents

Question

Isn't work
I've tried some way in Isn't work, I can not show homePage.html conrectlly in b.html .And I can show homePage.html alone in chrome. I have jquery-3.2.1.min.js. and here is my b.html

<!DOCTYPE html>
  <html> 
    <head> 
      <script src="jquery-3.2.1.min.js"></script> 
      <script> 
      $(function(){
        $("#includedContent").load("homePage.html"); 
      });
      </script> 
    </head> 
    <body> 
       <div id="includedContent"></div>
    </body> 
  </html>

Any suggestion will be appreciated.

score 0 · Answer 1 · answered May 12 '17 at 03:15

0

You can use w3-include:

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

Or PHP:

<html>
<body>

<div class="menu">
<?php include 'menu.php';?>
</div>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>

</body>
</html>

There are other ways too, I just included two.

answered May 12 '17 at 03:15

Carl Binalla

5,153
5
25
44

You already tried the codes I provided? Can you elaborate not working? any errors appearing? – Carl Binalla May 12 '17 at 03:19
tag can show something,but it still not show the right style – wylasr May 12 '17 at 03:20
What ` – Carl Binalla May 12 '17 at 03:21
I've tried use W3.js in W3cschool.the attribute ` w3-include` isn't work – wylasr May 12 '17 at 03:23
Dd you include the ``? – Carl Binalla May 12 '17 at 03:24
I copy the whole code and change to my file address . and I tried to use other html tag ,such as ` – wylasr May 12 '17 at 03:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/144023/discussion-between-wylasr-and-swellar). – wylasr May 12 '17 at 03:49

score 0 · Answer 2 · answered May 12 '17 at 03:37

Including an HTML template is similar to the way we include a stylesheet, we use the tag. But instead of using rel=stylesheet, we add the link tag with rel=import. As an example, here I will include a template named template.html

<link rel="import" id="template-file" href="template.html">

To append the content in the file, we may add the script within the body. Also, in order for this following script to work, we have to put it after the rel=import.because we should ensure that the content in rel=import has been completely loaded by the browser before the script, so that the script is able to recognize the elements, the element’s id, or the classes within that file.

To begin, we select the template file with this code.

var getImport = document.querySelector('#template-file');

Then we need get the content :

var getContent = getImport.import.querySelector('#content');

Now we can append the content within the body using the JavaScript appendChild() method.

document.body.appendChild(document.importNode(getContent, true));

The content should now appear in the main file.

Anyway ,thanks,although,it's not work. nothing changed. – wylasr May 12 '17 at 03:47 — wylasr, May 12 '17 at 03:47

score 0 · Answer 3 · answered May 12 '17 at 09:47

  $("#includedContent").load("homePage.html", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });

use this instead and see if you are getting any error or not.

how to include another html file as contents

3 Answers3