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

时间:2014-10-02 11:36:30

标签: javascript html5 css3

我有一个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,但我不知道如何获取内容并将其放入模板中,然后所有内容都应该在博客文章的全部内容中。我怎么能这样做或者是否可以这样做?实际上,这样做有意义吗?如果不是,我该怎么办?

1 个答案:

答案 0 :(得分:0)

如果我是你,我会颠倒你采取这样做的步骤。首先,您需要在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);
 });

这样的东西应该有效,减去一些可能的语法错误。