How to append a whole html file with jquery

Question

I got a html file like this,

<!DOCTYPE html>
 <html lang="en">
  <head>
   //some content
  </head>
  <body>
   //some content
  </body>
 </html>

My question is how to load this file as a whole with jquery. I tried it with append function, but it didn't work.. I searched for the solution for quite a while, but just found a lot of methods to append some parts of html file, like meta, link, not a whole file.

Can I do it with jquery?

Can I ask why you'd want to do that? Perhaps your'e asking the wrong question. What's the ultimate goal? Maybe you're going about it wrong. — Difster, Apr 14 '17 at 03:24
I'm making a project with playcanvas, a 3D engine. With this engine, I have to load html file with document, otherwise it wont show my ui written by html + css. I know a simple way for doing this is to use jquery, but I don't know how to load or append the whole html exactly. This is why I pose this question. — Ranger 22, Apr 14 '17 at 03:32
Please check: https://www.w3schools.com/jquery/ajax_load.asp — Om Sao, Apr 14 '17 at 03:38
Please share with us what have you tried and how it didnt work — Mark, Apr 14 '17 at 03:40
Are you trying to replace entire existing `document` with file? — guest271314, Apr 14 '17 at 03:41

score 1 · Answer 1 · answered Apr 14 '17 at 03:47

1

index.html or whatever

<iframe src="filename.html"></iframe>

filename.html

<!DOCTYPE html>
 <html lang="en">
  <head>
   //some content
  </head>
  <body>
   //some content
  </body>
 </html>

answered Apr 14 '17 at 03:47

Cameron

1,049
12
24

OP is trying to replace existing `document` with imported `document`, not display imported `document` in `` element. – guest271314 Apr 14 '17 at 04:24
I thought he was "appending" it which would mean adding it at the end or in a child element etc – Cameron Apr 14 '17 at 04:26
See http://stackoverflow.com/questions/43404728/how-to-append-a-whole-html-file-with-jquery/43405004#comment73870071_43404728, http://stackoverflow.com/questions/43404728/how-to-append-a-whole-html-file-with-jquery/43405004#comment73870107_43404728 – guest271314 Apr 14 '17 at 04:31

guest271314 · Answer 2 · 2017-04-14T04:30:29.940

You can use <link> element with rel attribute set to import, href set to path to file, type set to "text/html". Use XMLSerializer() instance .serializeToString() with replacement document .doctype property as parameter to get <!DOCTYPE> declaration from imported document; document.write() with .import.documentElement.outerHTML property of link element as parameter to replace existing .doctype and <html> node with .doctype and <html> of imported document.

<!DOCTYPE html>
 <html lang="en">
  <head>
   <link id="doc" rel="import" href="https://gist.githubusercontent.com/guest271314/9921cb52b143437b23f23fa32284ca35/raw/86532c043b666bce15b33c91dc29e98615dd4e25/replacementDocument.html" type="text/html" />
  </head>
  <body>
   //original content
   <button>load html document</button>
   <script>
   var link = document.getElementById("doc");
   document.querySelector("button")
   .onclick = function() {
     // http://stackoverflow.com/a/30565562/
     var dt = new XMLSerializer().serializeToString(link.import.doctype);  
     document.write(dt, link.import.documentElement.outerHTML);
     document.close();
   }
   </script>
  </body>
 </html>

Doesn't work in Firefox, IE11, or Edge. Appears to work in Chrome. — Ouroborus, Apr 14 '17 at 18:24

How to append a whole html file with jquery

2 Answers2

Linked