I have two files, lets say a.html and b.html, both in the same folder. 'a' contains information that i want to be seen in 'b', when it is opened. How can I do that using only HTML?
3 Answers
You can do that by using HTML Import
In your index file, you include an import to your page by simply adding
<link href="import.html" rel="import" />
To use the content of an import use the .import property.
var content = document.querySelector('link[rel="import"]').import;
To make use of a certain element.
var elm = content.querySelector('.your-class-to-use');
But take note, it's not being supported on all browsers check here.
1 Comment
DrCord
this is technically an HTML5 feature but requires JavaScript to use the content, so this isn't an HTML only method of importing files...
Per comment on question, the way to embed a second HTML document into the first using javascript looks something like this:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
$.get("b.html", function( data ) {
$("#target").html(data);
});
});
</script>
</head>
<body>
<h1>this is a title</h1>
<div id="target"><!-- dynamic content will be put here --></div>
<p>
You can put any other html you like in the rest of the document
</p>
</body>
</html>
I used jquery here instead of raw javascript, because it abstracts differences in browser behavior, wraps potential errors and is therefore easier to get started with.
b.html, you use<a href="b.html">link to b</a>. If you want to "embed"b.htmlinto the body ofa.htmlyou don't do that without javascript.