Making a multiple objects appear one after another using Firebase - firebase

Question

Edited a bit to try and explain this better
I have a problem in which i'm not sure how to even start to go about solving. It's also very hard to explain.
Basically, I have a storage location in Firebase that looks like this:
(in this image it only shows one storage location. later there is another with a title of 'Test' and a body of 'As you can see, this messes up')
What I want to do is have it so that when I use this code:
html file:
<div class="span8" id="verticalLine">
<h2 id="main-header"><center>Latest news</center></h2>
<div id="newsDivHead"></div>
<br/>
<div id="newsDiv"></div>
<script>
var newsData = new Firebase("https://agn.firebaseio.com/web/news/mc/")
newsData.limit(10).on('child_added', function (snapshot) {
var message = snapshot.val();
$('<div/>').text(message.body).appendTo($('#newsDiv'));
$('<div/>').text(message.title).appendTo($('#newsDivHead'));
$('#newsDiv')[0].scrollTop = $('#newsDiv')[0].scrollHeight;
});
</script>
<!---
$('<div/>').text(message.body).prepend($('<em/>')
.text(message.title+': ')).appendTo($('#newsDiv'));
$('#newsDiv')[0].scrollTop = $('#newsDiv')[0].scrollHeight;
});
--->
</div>
</div>
I want it to give a result like this:
Notice the formatting of the title and the break.
But unfortunately it comes out like this:
What I want to happen is it formats the value stored in message.title so that it appears above the message.body and is formatted in the format (or something similar). I have realised that this is not possible using the two div tags, I can only use the one.
So what do I do? Is this even possible? The title and text are in the 'varibles' (firebase ref) message.title and message.body respectivley (As you can see in the code.)
Any Help gladly appreciated!

Answer 1

This doesn't have anything to do with Firebase, but is rather a HTML issue. You have two divs in your HTML, one to show titles and another to show content. Don't do this and use CSS classes instead of visually separate titles from text.
<div class="span8" id="verticalLine">
<h2 id="main-header"><center>Latest news</center></h2>
<div id="content">
</div>
</div>
var newsData = new Firebase("https://agn.firebaseio.com/web/news/mc/")
newsData.limit(10).on('child_added', function (snapshot) {
var message = snapshot.val();
var body = $('<div/>').class('body').text(message.body);
var title = $('<div/>').class('title').text(message.title);
$('<div/>').append(title).append(body).appendTo($('#content'));
});
In your CSS, set the styles for the classes 'body' and 'title' as you do currently for your 'newsDiv' and 'newsDivHead' IDs:
.body {
font-size: 12px;
}
.title {
font-size: 18px;
font-weight: bold;
}