I've been searching around for different ways to achieve this.
What I'm trying to do is to add a new DIV to my page without refreshing the actual page, and put that on a timer. Kind of a Live-Blog.
But lets ignore the timer for now.
What I have so far:
var divTag = document.createElement("article");
divTag.id = "newArticle";
divTag.style.margin = "0px auto";
divTag.innerHTML = "<header>This is the title</header>";
instead of an actual DIV element I used the Article element since I'm also trying to keep it HTML5. But it works both ways.
I also added a simple button that calls this function.
The thing is, it always adds the Div to the bottom of the page (under the footer), while I need it to add it under the header as the new 1st article, and move all the older once down a notch.
The only way I could think of doing so is to use an Array to store the previous articles, then slide all the array entries down one spot, add the new article to the 1st position, use a For loop to add the newly organized articles.
Is that the best way to go about it?
Also, I've noticed that when I press the button, while it does add the Div visually, it doesn't Really add it to the source code. So a manual refresh of the page returns everything to its previous state.
How can I add these new articles to the actual html code?