What is better approach to update html content of some window on page:
1) I can use html template of that window, and when I need to change data described there I simply generate real html and replace old one with new. In this case I have to send from server side both html page with first data (for search engine; I can't fill this data on client-side), and also html template (so I need to keep them synchronized). Window has tabs, so template will be not that small. Another pitfall I want to avoid - memory leaks :) If some elements will leak, in case of template and replacing html content all the time memory will be "eaten" quite fast (of course until we find that leak and fix it);
2) I can make javascript object, which will save links to DOM elements with changeable content
myWindow.name = document.getElementById('item-name');
Overall I need to cache links to about 20 DOM elements. And when new data comes I do the following:
myWindow.name.innerHTML = newName;
In this case I don't need to have template (and if something leaks, it won't be so noticeable for end-user, cause this structure will be not changed until page reloading), but probably this structure takes some memory, and each time when I use innerHTML browser will reflow. Also it is possible to avoid saving links in object, but look up DOM structure all the time when content is changing:
document.getElementById('item-name').innerHTML = newName;
but this code will take time to find DOM element each time, that's why I decided that caching would be better. Also maybe using "innerText"/"textContent" properties will not cause reflow (I'm not sure about it)...
So what's better? Template / JavaScript Pointers ?