Include HTML markup from file with pure HTML and suppress the creation of another docment structure

Question

I have a HTML file where I'd like to include the HTML markup from other files, for example:

sub-content-1.html: <div>This is the <b>sub-content</b> that should be included</div>

I've tried the following solutions from this answer: HTML5 include file:

<object name="included" type="text/html" data="sub-content-1.html"></object>

and:

<embed type="text/html" src="sub-content-1.html">

The problem I have is that it not only includes the content of the html file, but also generates an additional HTML/HEAD/BODY-structure inside the object (embed) element and wraps the content within. Therefore, the included content is treated as a separate document and doesn't use my css styles. I didn't specify this html-structure in the file (only the content) and I don't want it to be treated as a separate document.

I tried specifying the MIME type as text/plain, hoping that it would load it as-is. But still, the html-structure is generated and the content gets wrapped within a <pre>-tag.

So what I want HTML to do is just to include the markup, without the extra document-structure being generated. How can this be done?

Answer 1

If you use jQuery, you can use the .load() function.

If not, you can use an XMLHttpRequest object and load the content into the DOM via AJAX.