Okay this is a bit complex but I thought i’d post this in case it’s a common problem people have ran into before.
heres the codepen: http://codepen.io/anon/pen/AHBED
Basically, I have a ton of data, that needs to be injected into the HTML when the user interacts. e.g there are 4 templates on the site and when the user clicks on one, all the links/imgs on the page change to match the links for template one.
I found 3 ways of doing this but they all seem somewhat inefficient:
1. have all the dom elements in the html but hidden, and just swap srcs/hrefs when the user clicks on the template. this would be inefficient because you have a bunch of hidden elements cluttering the dom.
2. have the data in arrays and change the the element srcs/hrefs when the user clicks on template. this requires multiple jquery statements and also seems inefficient. ( e.g if user clicks box2, content’s link changes to 2.html, text changes to page two, img src changes to 2.jpg )
3. have the dom in a templating like state, render the template and inject it into the page. also seems lengthy as far as jquery statements go.
Is there a best practice way of doing it?
