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?
2 answers
solution1
1 2017-04-14 03:47:48
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>
solution2
0 2017-04-14 04:01:07
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.