The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed