infinite scrolling using components

[deep jain]

I am trying to implement infinite scrolling on my newsfeed completely using components...

My present solution is very trivial, it loads 5 items first, then on reaching bottom, component is refreshed with 10 elements, then 15 and so on...

Now, i want to append only the next five items, instead of loading all the items again...

I can achieve this without using components (javascript templates+json items), but i want to use components only, 

One method which i thought of was to use two components, one for loaded posts, and one for loading further content, i will transfer the second components content to first component, by:

response.js='document.getElementById("component1").insertAdjacentHTML("beforeend",document.getElementById("component2").innerHTML);document.getElementById("component2").innerHTML="";'

by doing this the content is transferred to component 1, but when i comment on the item, the page refreshes (whereas it should trap the comment, and submit it via ajax). Can i change the innerHTML of a component without changing its behavior? And the appended elements should send request to component1 or not if a comment is submitted after appending ? (both components work as expected before changing innerHTML,)