Is there a better/more efficient way to create and append this list item with jQuery?
<p>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?</p>

<p>Here is the code I currently use: </p>

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

jQuery("#element-rules").append(li);
</code></pre>

<p>Thanks for looking.</p>
