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?