0

I'm creating a dynamic popup menu whose contents depends on the state of what the user clicked on. Is it considered a better practice to create a template menu in html and modify which options are displayed in javascript, or to create everything in javascript on the fly? I'm using jQuery.

code example:

HTML:

<div id="menuTemplate" class="menu"> <div class="opt1">Option 1</div> <div class="opt2">Option 2</div> </div> ...

Javascript:

showMenu = function (state) { var menu = $("#menuTemplate").clone(true).removeAttr("id"); if (state) { menu.find(".opt1").show(); menu.find(".opt2").hide(); } // the rest of the function }

or

Javascript:

showMenu = function (state) { var menu = $("<div class='menu'></div>"); if (state) { menu.append($("<div class='opt1'>Option 1</div>")); } else { menu.append($("<div class='opt2'>Option 2>/div>")); } // the rest of the function }
Improve this question
1
  • You can do this entirely in CSS. Commented Nov 8, 2011 at 21:31

1 Answer 1

Reset to default
2

It depends upon the requirement: if the options are going to be limited then I would suggest going with show/hide functionality, but if in the future these values require an asynchronous request then refactoring it will be painful.

Moreover, in the second code sample, please don't append entire html in menu: create a div element and add css class to it. This way it is more readable and maintainable. for eg 

newdiv = document.createElement('div'); newdiv.className = 'cssClass'; menu.append(newdiv);
Improve this answer
1
  • Ah, good call on creating the div element and adding css to it. Thanks! Commented Nov 8, 2011 at 15:18

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.