jquery - Smooth update of DOM tree in Javascript -

i looking solution of migrating dom tree in smooth way. let's imagine dom tree shows list of books:

<div class="books">   <div class="book">     <div class="title">book 1</div>     ...   </div>   <div class="book">     <div class="title">book 2</div>     ...   </div>   ... </div> 

this list should updated new version generate server's input:

<div class="books">   <div class="book">     <div class="title">this new book</div>       ...     </div>   <div class="book">     <div class="title">another book</div>     ...   </div>   <div class="book">     <div class="title">book 2</div>     ...   </div>   ... </div> 

i replace whole structure new one. causes big flicker on screen, avoid. aim iterate through element in recursive way , depending on found difference between old new structure update altered elements.

this algorithm isn't simple implement in robust way. that's why asking, if knows library, can achieve this.

i'm not entirely clear on you're asking, react.js library handle you're talking doing. library maintains virtual copy of dom, , when changes made require revising page real , virtual doms diffed, necessary changes being made page.

frankly though, react seems overkill unless decide want serious heavyweight library handling model-view.

if you're having trouble dom-change stutter, consider wrapping updating calls requestanimationframe (mdn).

as implementing diff algorithm on own, sounds fun exercise!

links:

https://developer.mozilla.org/en-us/docs/web/api/window.requestanimationframe http://facebook.github.io/react/