load content of blog post in html file into template then into index file
Question
I have a html file which has blog post content and a template for a div in another html file.
I just want take blog post content and paste it in blog post template body and load them to index html file.
Content html file
<h1>Computer Science In Today</h1>
<p> body </p>
Post Template
<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 file
<body>
<div class="wraper">
<div class="all-blog-post">
</div>
</div>
</body>
I want to add blog post inside of all-blog-post part. I know document.getElementById('all-blog-post').innerHTML , but I donot know how to take content and put it into template then all of them should be in all-blog-post part. How can I do that or is it possible to do it? Actually, is it meaningful to do so? If no, what should I do?
1 answers
solution1
0 ACCPTED 2014-10-02 11:59:09
If I were you, I would reverse the steps that your taking to do this. First, you'll need a wrapper above the content at the top of content.html so it would look like this:
<div class='content-class'>
<h1>Computer Science In Today</h1>
<p> body </p>
</div>
After that youll want to use the jquery load function to insert the html into your index.html:
$(document).ready(function){
$('.all-blog-post').load('place-path-here/content.html');
}
Once thats done, youll want to place that blog data into the right wrapper so the whole jquery call would look like this:
$(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);
});
Something like this should hopefully work, minus some possible syntax errors.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.