Question

I am creating a jquery function which allows users to create rules and append these rules to a list. I am currently writing the list item html in long form inside the function and it works exactly how it is meant to, but I was wondering if there was a better/more efficient way to create this new list item than writing out all of the html?

Here is the code I currently use:

var li = jQuery('<li>').html('<div id\="rule-desc\">' + desc + '</div>'
                        +'<input type=\"button\" class=\"remove-rule\" value=\"Remove\" />'
                    + '<input type=\"hidden\" name=\"rule['+ index + '][type]" value="' + rule_type + '"/>'
                        + '<input type=\"hidden\" name=\"rule['+ index + '][value]" value="' + value + '"/>'

jQuery("#element-rules").append(li);

Thanks for looking.

Answer 1

This looks like a staple case for something like mustache.js or handlerbars.js. If you were using, say, Handlebars, your code would look like this:

// Once, compile the template
var template = '
  <div id="rule-desc">{{desc}}</div>
  <input type="button" class="remove-rule" value="Remove" />
  <input type="hidden" name="rule[{{index}}][type]" value="{{rule_type}}" />
  <input type="hidden" name="rule[{{index}}][value]" value="{{value}}" />';

var $ruleset = Handlebars.compile(template);

// Then, whenever you build your rule:
jQuery("#element-rules").append(jQuery("<li>").html($ruleset({
  desc: desc,
  index: index,
  value: value,
  rule_type: rule_type
}));

The basic idea is that you build a template, and then generate HTML by passing a hash of properties to the compiled template, from which you get HTML back. It makes large-scale management of this sort of thing quite easy.