使用ajax构建模板时HTML自动关闭标签答案

【问题标题】：HTML automatically closing tags when using ajax to build template使用ajax构建模板时HTML自动关闭标签
【发布时间】：2018-04-17 21:12:37
【问题描述】：

所以我正在尝试使用 HTML 和 jQuery AJAX 制作模板。我遇到的问题是 HTML 会在收到我的结束标签之前自动结束标签，所以它会弄乱我的格式，我需要了解有关此的更多信息或更好的方法来做到这一点

JavaScript

$.post( "https://url.com/header.php", function(data){
    $( "#header" ).after(data);
});

$.post( "https://url.com/footer.php", function(data){
    $( "#footer" ).before(data);
});

这是我从服务器中提取的#header 文件中的开始标记

<div class='container-fixed'>

这是我的 #footer 文件的结束标记，我从服务器中提取

</div>

比我有我的 home.html 文件，这是我的模板页面与我的#header，#footer

<header id='header'></header>

<div>HELLO WORLD</div>

<footer id='header'></footer>

这就是我希望我的最终代码在页眉和页脚加载后的方式

<div class='container-fixed'>

<div>HELLO WORLD</div>

</div>

但这就是实际发生的事情

<div class='container-fixed'>
</div>

<div>HELLO WORLD</div>

浏览器没有将我的代码包装在容器文件中，它只是自行关闭我的容器 div，而不是在页脚文件中删除我的结束标记。我的代码比我在这个例子中使用的要复杂得多，但我只是想保持简单；我知道我可以将容器 div 添加到我的 home.html 中，但这不是我想要做的。任何解决方法？谢谢

我的问题是如何在一个文件中发送和未关闭的标签并在另一个文件中关闭它而不用浏览器为我做这件事。

【问题讨论】：

在拥有所有 html 之前不要追加到 DOM
document.getElementsByClassName("container-fixed")[0].children[0].innerHTML = "HELLO WORLD + whatever!!"
@patrick 在我的情况下我该怎么做？
@cryptopat 那只是插入 hello world，我正在构建一个模板，所以内容比 hello world 多得多，我必须使用该容器 div 来包装我的所有页面
这样的模板只会增加更多的复杂性，而不是减少它。

标签： javascript jquery html ajax templates

【解决方案1】：

将开始和结束标签分布在多个文件中很麻烦（而且不是一个好习惯）。即使您想为每个页眉、内容和页脚创建一个单独的文件，也要制作一个包含这三个（或更多，如果需要）文件的基本模板文件，并且每个文件都有自己整洁完整的代码，每个文件打开和在自身内部关闭自己的标签。这让开发、维护和扩展变得更加容易。

以下是基本模板文件的示例布局：

<html>
  <head>
     <!-- include HEAD file here (meta tags, styles, js/css files etc.) -->
  </head>
  <body>
     <div id="container">
         <header>
             <!-- include/display HEADER file here -->
         </header>

         <nav>
             <!-- include/display NAV/MENU file here -->
         </nav>

         <div id="content">
             <!-- include/display CONTENT here -->
         </div>

         <footer>
             <!-- include FOOTER file here -->
         </footer>
     </div>
  </body>
</html>

您可以根据需要添加或删除单个模块（文件）。

在我看来，这种方法最适合您，因为您正在尝试通过 ajax 构建模板，因此您可以轻松地将所有文件分开，然后在需要时将它们包含在内。您还可以默认包含一些文件（在页面加载时）并通过 ajax 动态包含其他文件。希望你能明白。

【讨论】：

谢谢你，我明白你现在说什么了，是的，这样容易多了