How to add entire html file with jquery
I have 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 altogether using jquery. I tried it with append but it didn't work. I have been looking for a solution for quite some time, but I found many methods to add some parts of the html file, like meta, link, not the whole file.
Can I do this with jquery?
source to share
You can use the element <link>
with the attribute rel
set to import
, href
set for the path to the file type
is installed on "text/html"
. Use XMLSerializer()
instance .serializeToString()
with a replacement property document
.doctype
as a parameter to get the declaration <!DOCTYPE>
from the imported one document
; document.write()
with .import.documentElement.outerHTML
element attribute link
as parameter to replace existing .doctype
and <html>
node .doctype
and <html>
imported ones 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>
source to share