How do you add HTML dynamically with JS (In Strings?)

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.

Some possibilities I see are:

As a string http://jsfiddle.net/g7g7t/

$(function() {
    var dialogHtml = '<div><label>Username</label><input type="text" name="username" /开发者_运维问答><br /><label>Password</label><input type="password" name="password" /></div>';
    var $dialog = $(dialogHtml).dialog({
        title: 'Dynamic Dialog'
    })
});

That can get messy very quickly

As external file http://jsfiddle.net/3zFeT/ (does not work)

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

What method do you use?

String for sure, an external file only adds a new request into the mix and you should try to minimize them. Plust strings give the power to be used as templates with the replace function, or some js frameworks even have higher level utilities for this.

BTW, your second example doesnt work because of cross domain issues