Dynamically add item to an existing list

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++;
  }
}

Does your actual markup have duplicated IDs? That's invalid HTML. ID attributes must be unique within the DOM. Use classes instead. — Matt Ball, Aug 27 '12 at 04:17

score 2 · Accepted Answer · edited May 23 '17 at 11:44

2

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);

edited May 23 '17 at 11:44

Community

1
1

answered Aug 27 '12 at 04:19

voithos

68,482
12
101
116

Both solutions work well with static content so thanks for that! Unfortunately, I'm adding it into a Wordpress loop and in that case it doesn't work. – HjalmarCarlson Aug 27 '12 at 14:25

score 0 · Answer 2 · edited Aug 27 '12 at 04:22

0

If you are getting an integer, have the div id be the index. That way you can use document.getElementById('post'+id).innerHTML to append.

edited Aug 27 '12 at 04:22

jshawl

3,315
2
22
34

answered Aug 27 '12 at 04:20

Franz Payer

4,069
15
53
77

Modifying an element's innerHTML won't append another element after it (per the OP), it will insert it inside the element. – RobG Aug 27 '12 at 06:28

Musa · Answer 3 · 2012-08-27T07:11:54.150

Your approach is all wrong, doing a for each on an element won't give you its child nodes but its property keys. You can use getElementsByTagName or querySelector to accomplish your goal

var posts = docuemnt.getElementById('page').getElementsByTagName('div');
var insert = 4;
var newPost = "new post content";
var div = document.createElement('div');
div.appendChild(document.createTextNode(newPost ));
posts[insert].parentNode.insertBefore(div, posts[insert]);//index are zero based so element 4 is actually the 5th element

or

var insert = 5;
var post = docuemnt.querySelector('#page > div:nth-child('+insert+')');//nth child index is one based
var newPost = "new post content";
var div = document.createElement('div');
div.appendChild(document.createTextNode(newPost ));
post.parentNode.insertBefore(div, post);

https://developer.mozilla.org/en-US/docs/DOM/Document.querySelector

https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore

https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByTagName

You have some errors, the arguments to [insertBefore](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-952280727) are reversed and the new node should be inserted *after* the index, so before the nextSibling (if the OP has the indexing right, it seems to indicate after index 3). The appending line should be `...insertBefore(div, posts[insert].nextSibling)`. — RobG, Aug 27 '12 at 06:25

score 0 · Answer 4 · answered Sep 30 '12 at 22:55

Your can create jtag for new post div tag and call .dom() function to receive div element. Try Jnerator library.

function addPost() {
    var lastPostElement = page.lastChild;
    var count = page.childNodes.length;
    var postText = tagPost.value;
    var jtag = $j.div({ id: 'post' + count, child: postText });
    var newPostElement = jtag.dom();
    page.insertBefore(newPostElement, lastPostElement);
}

See an example here: http://jsfiddle.net/jnerator/5nCeV/

Dynamically add item to an existing list

4 Answers4