The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Organizing and injecting data with JS and HTML

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #43136

    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?


    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.