Grow your CSS skills. Land your dream job.

Organizing and injecting data with JS and HTML

  • # March 4, 2013 at 1:43 pm

    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?

    # March 4, 2013 at 6:50 pm

    Why not just try having the html page load a ‘standard’ template with stylesheets, js files, etc (which you can defer the others). And depending on whatever changes, just load in a different stylesheet.

    What kind of ‘data’ are you ‘injecting’ into your html file? I didn’t really gather too much from your codepen.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".