Just append both the title and div elements to the same container, like this:
containerContent.appendChild(div);
containerContent.appendChild(diva);
The problem was that you were appending all titles to a div, and all content to a other div.
What was happening was this:
First, you added title & content 1
:
<div> <!-- Fist div here -->
Title 1
</div>
<div> <!-- Second div -->
Content 1
</div>
All seems ok, but when you add another article, this is what happened:
<div> <!-- Fist div here -->
Title 1
Title 2
</div>
<div> <!-- Second div -->
Content 1
Content 2
</div>
And if you just append the elements in one <div>
, they will be in there in the order you add them, so resulting in:
<div> <!-- Fist div here -->
Title 1
Content 1
Title 2
Content 2
</div>