将 html 文件中的博客文章内容加载到模板中，然后加载到索引文件中答案

【问题标题】：load content of blog post in html file into template then into index file将 html 文件中的博客文章内容加载到模板中，然后加载到索引文件中
【发布时间】：2014-11-27 09:23:14
【问题描述】：

我有一个 html 文件，其中包含博客文章内容和另一个 html 文件中的 div 模板。

我只想获取博客文章内容并将其粘贴到博客文章模板正文中并将它们加载到索引 html 文件中。

内容 html 文件

 <h1>Computer Science In Today</h1>
 <p>  body </p>

帖子模板

 <div class="blog-post-type-1">
    <div class="header"></div>

    <div class="blog-post-content">
    </div>

    <div class="footer">
        <img src="bg.png"/>
        <img src="fgg.png"/>
        <img src="background.png"/>
    </div>
 </div>

index.html 文件

  <body>
     <div class="wraper">


     <div class="all-blog-post">

     </div>
     </div>
  </body>

我想在 all-blog-post 部分中添加博客文章。我知道document.getElementById('all-blog-post').innerHTML，但我不知道如何获取内容并将其放入模板中，然后所有这些都应该在 all-blog-post 部分中。我该怎么做或者有可能做到吗？其实，这样做有意义吗？如果没有，我该怎么办？

【问题讨论】：

你有什么触发器可以做到这一点吗？还是仅仅加载 index.html？
@Bradley 没有和触发器。当索引页面加载到客户端时，我只想将最后三篇博客文章以 html 文件格式从内容文件夹加载到索引博客文章 div 区域。

标签： javascript html css

【解决方案1】：

如果我是你，我会逆转你为此所采取的步骤。首先，您需要在 content.html 顶部的内容上方有一个包装器，因此它看起来像这样：

<div class='content-class'>
 <h1>Computer Science In Today</h1>
 <p>  body </p>
</div>

之后，您将需要使用 jquery 加载功能将 html 插入到您的 index.html 中：

    $(document).ready(function){ 
        $('.all-blog-post').load('place-path-here/content.html');
     }

完成后，您需要将该博客数据放入正确的包装器中，以便整个 jquery 调用如下所示：

$(document).ready(function){ 
     $('.all-blog-post').load('place-path-here/content.html');
}

 $(document).on('load', '.blog-post-content', function(){
     var blog-post-content = $('.content-class').html();
     $(this).append(blog-post-content);
 });

这样的东西应该可以工作，减去一些可能的语法错误。

【讨论】：

如果您发现有趣的问题以克服限制，您可以投票吗？我试过投票给你，但它说我至少需要 15 个。它太严格了。
如果答案解决了您的问题，您可以将其标记为正确，但我的投票不会让您达到 15。