I\'m creating a dynamic popup menu whose contents depends on the state of what t

Question

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
}

Explanation / Answer

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);

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.