How do you add HTML dynamically with JS (In Strings?)
<p>I read before that HTML thats used only for JS should not be in the HTML? So how do you store markup to be used for JS added content. eg. Markup for jQuery Dialogs, controls, buttons etc.</p>

<p>Some possibilities I see are: </p>

<p><strong>As a string</strong> <a href="http://jsfiddle.net/g7g7t/" rel="nofollow">http://jsfiddle.net/g7g7t/</a></p>

<pre><code>$(function() {
    var dialogHtml = '&lt;div&gt;&lt;label&gt;Username&lt;/label&gt;&lt;input type="text" name="username" /&gt;&lt;br /&gt;&lt;label&gt;Password&lt;/label&gt;&lt;input type="password" name="password" /&gt;&lt;/div&gt;';
    var $dialog = $(dialogHtml).dialog({
        title: 'Dynamic Dialog'
    })
});
</code></pre>

<p>That can get messy very quickly</p>

<p><strong>As external file</strong> <a href="http://jsfiddle.net/3zFeT/" rel="nofollow">http://jsfiddle.net/3zFeT/</a> (does not work)</p>

<pre><code>$(function() {
    $.get("http://pastebin.com/raw.php?i=pFTCdN81", function(html) {
        $(html).dialog({ title: "Dynamic Dialog" });   
    });
});
</code></pre>

<hr>

<p>What method do you use?</p>
