使用纯 HTML 包含来自文件的 HTML 标记并禁止创建另一个文档结构

Question

我有一个 HTML 文件，我想在其中包含来自其他文件的 HTML 标记，例如：

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

我从这个答案尝试了以下解决方案：HTML5 include file:

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

和：

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

我遇到的问题是它不仅包含html文件的内容，而且还在对象（嵌入）元素内生成了一个附加的HTML/HEAD/BODY-结构并将内容包装在其中。因此，包含的内容被视为单独的文档，不使用我的css 样式。我没有在文件中指定这个 html 结构（只有内容），我不希望它被视为单独的文档。

我尝试将 MIME 类型指定为 text/plain，希望它能按原样加载。但是，仍然会生成 html 结构，并且内容会被包装在 <pre>-tag 中。

所以我想要 HTML 做的只是包含标记，而不生成额外的文档结构。如何做到这一点？

Answer 1

如果你使用jQuery，你可以使用.load()函数。

如果没有，您可以使用 XMLHttpRequest 对象并通过 AJAX 将内容加载到 DOM 中。