CODEWITHSUNDEEP
javascriptjquery
Jiew Meng
Jiew Meng

Reputation: 88197

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?

Upvotes: 0

Views: 65

Answers (1)

Mon Villalon
Mon Villalon

Reputation: 692

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

Upvotes: 2

Related Questions