javascriptinnerhtmlfeedmethodology

Generating feed items that won't nest Divs


I'm working on this project at helpspread.com. Everything is almost completed, now I need to generate feed on the homepage for logged in users, so they can get live update of an item when it is posted. I save the id of the last item they saw and use it to query database for items of ids greater than the saved id, since the ids are auto incremented in the MySQL database. After some few seconds, I do the same and write content to the page.

The page that does this interval query is an iframe, and writes to the parent frame based on the id of the div.

This would replace the content of the div if I don't dynamically change it's id after each query. So I came up with the idea of generating div id from the id of the last item seen from database

But the next problem is that they are nested. An example is this:

I have a page with

<div id='new-feed-1367862865'>new item goes here</div>

I have an iframe with this

<script type="text/javascript">
var output_feed="<div id='new-feed-1367862872'>next new item will come here</div>New"; 
parent.document.getElementById('new-feed-1367862865').innerHTML=output_feed;
</script>

At the end, I'd get something like this: Nested divs

<div id="new-feed-1367864332"><div id="new-feed-1367864461"><div id="new-feed-1367864581"><div id="new-feed-1367864701"><div id="new-feed-1367864821"><div id="new-feed-1367864942"><div id="new-feed-1367865062"><div id="new-feed-1367865182"><div id="new-feed-1367865302"><div id="new-feed-1367865422"></div></div></div></div></div></div></div></div></div></div>

This doesn't cause problems on viewing, but is there a better way to do this, that may just append data to a particular div, and not replace its content.


Solution

  • ... that may just append data to a particular div, and not replace its content.

    Yes it is called appendChild().