包含文件通过JavaScript或jQuery的HTML动态 [英] Include file In HTML by JavaScript or jquery dynamically

问题描述

我试过下面的代码。但它不能正常工作。只有一个文件重复添加/包含。我该如何解决这个问题？
**我想创建一个自定义标签，其中可以包含h​​tml文件！ -

I tried the following code. But it doesn't work properly. Only one file add/ include repetitively. How can I solve this? **I want to create a custom tag "" which can INCLUDE html file!!!! –

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>

推荐答案

< include> 不是有效的 html 元素

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

You can use <link> element with rel attribute set to "import" to load resources into document. At load event of <link> element you can get the content of resource using 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");

这篇关于包含文件通过JavaScript或jQuery的HTML动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！