1

I've been building web apps that add and remove lots of dynamic content and even structure within the page, and I'm not impressed by the method I'm using to do it.

When I want to add a section or module into a position in the interface, I'm storing the html in the code, and I don't like that:

if (rank == "moderator") {
   $("#header").append('<div class="mod_controls">' +
      // content, using + to implement line breaks
   '</div>');
}

This seems like such a bad programming practice.. There must be a better way. I thought of building a function to convert a JSON structure to html, but it seems like overkill.

For the functionality of the apps I'm using:

  • Node.js
  • JS
  • JQuery
  • AJAX

Is there some common way to store HTML modules externally for AJAX importation?

  • Please edit this if better tags can be used. I'm slightly new. – user129679 Jun 3 '14 at 19:33
  • Also, I was borderline on choosing between SO And Programmers for this. Hope I chose correctly. – user129679 Jun 3 '14 at 20:03
1

As you're already using jQuery, you might like the .load() method: "Load data from the server and place the returned HTML into the matched element."

If you incorporate AngularJS in the future you'll find there are many ways to include HTML (ngInclude, ngRoute w/templates) but my favorite are "directives" as you can easily couple associated JS & HTML together in a modular fashion.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy