通过 JavaScript 或 jquery 在 HTML 中动态包含文件答案

【问题标题】：Include file In HTML by JavaScript or jquery dynamically通过 JavaScript 或 jquery 在 HTML 中动态包含文件
【发布时间】：2017-03-03 18:46:53
【问题描述】：

我尝试了以下代码。但它不能正常工作。只有一个文件重复添加/包含。我该如何解决这个问题？ **我想创建一个可以包含 html 文件的自定义标签“”！！！！ -

var createIncludeTag = document.createElement('include');
$(function(){
    var includeFile = $('include').attr('href');
    $("include").load(includeFile);		   
});

<include href="nav.html"></include>
<include href="main.html"></include>
<include href="footer.html"></include>

【问题讨论】：

HTML 没有include 标记。
Load HTML template with JavaScript的可能重复

标签： javascript jquery html file include

【解决方案1】：

<include> 不是有效的html 元素。

您可以使用将rel 属性设置为"import" 的<link> 元素将资源加载到document。在<link> 元素的load 事件中，您可以使用link.import 获取资源的内容

<link rel="import" href="nav.html" type="text/html">

   $(function() {
     $("body").append($("link[href='nav.html']")[0].import.body.innerHTML)
   })

   $("link[href='nav.html']").on("load", function() {
     $("body").append(this.import.body.innerHTML)
   })

或者，您可以使用.load()

   $("#element").load("nav.html");

【讨论】：

谢谢，但我想要更多动态。我想创建一个可以包含 html 文件的自定义标签“”！！！
@Bapy <link> 获取资源，例如，html document，您可以在load 元素的load 事件中使用.import 属性获取该资源。 <include> 不是已定义的 html 元素。

【解决方案2】：

根据jquery API reference of .attr() function

描述：获取匹配元素集中第一个元素的属性值。

这就是为什么您只为所有三个元素加载第一个包含 html。

您必须改用.each() 函数。

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $("include").each(function (index, value) {
                $(this).load($(this).attr("href"));
            });
        });
    </script>
</head>

<body>
    <include href="nav.html"></include>
    <include href="main.html"></include>
    <include href="footer.html"></include>
</body>

</html>

顺便说一句，创建自定义 TAG 可能不是一个好主意。

【讨论】：