Question

I need to dynamically insert an element into an existing list of blog posts.

Here is an example of the HTML:

<div id="page">
  <div id="post">Post Content</div>
  <div id="post">Post Content</div>
  <div id="post">Post Content</div>
  <div id="post">Post Content</div>
  <!---- Dynamic Post Inserted Here--->
  <div id="post">Post Content</div>
  <div id="post">Post Content</div>
</div>

I’ve created a for loop that iterates through the posts and returns the location, but the location returned is an integer so I can’t append the new post to that variable. So what is the best way to append the item to my current post list?

I don’t have the exact function in front of me but this is essentially what i’m doing:

var post = docuemnt.getElementById('post');
var page = docuemnt.getElementById('page');
var pc = 0;
var insert = 5;
var newPost = "new post content";

for(post in page){
  if(pc == insert){
    **append new post content after this post**
  }else{
  pc++;
  }
}

Answer 1

If you were using jQuery, this would be incredibly easy.

$('#post4').after('<div id="post5">new post content</div>');

If you want to do it in pure JavaScript, then take a look at this question. The basic idea is:

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

In your case, you’d need to create a div node and append to the document directly.

var newpost = document.createElement('div');
newpost.id = 'post5';
newpost.innerText = newpost.textContent = "new post content";

var post = document.getElementById('post4');

post.parentNode.insertBefore(newpost, post.nextSibling);