Stack Exchange
Creating labels dynamically with javascript
Is there a better way of creating a information fieldset dynamically than this:
                var grid = document.createElement("ul");
                grid.style['text-align'] = "left";

                // Creates the legend and append it
                var child = document.createElement('legend');
                child.innerHTML = "Logado - Dados";
                loginbox.appendChild(child);
                // End of creating the legend

                // Start creating the first child
                var cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Usuário: </b>";
                child.for = "lusername";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['username'];
                child.for = "username";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the first labels

                // Start adding the second label                
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Membro Desde: </b>";
                child.for = "lbirthday";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['MemberSince'];
                child.for = "birthday";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the second labels

                // Start adding the third label             
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Última Visita: </b>";
                child.for = "llastvisit";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['LastVisit'];
                child.for = "lastvisit";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the third labels

                // Start adding the forth label             
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Frequência de Estudo: </b>";
                child.for = "lstudyfrequency";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['StudyFrequency'];
                child.for = "studyfrequency";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the forth labels

                // Start adding the fifth label             
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Faculdade: </b>";
                child.for = "lcollege";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['College'];
                child.for = "college";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the fifth labels

                // Start adding the sixth label             
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Curso: </b>";
                child.for = "lcourse";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['Course'];
                child.for = "course";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the sixth labels

            loginbox.appendChild(grid);

I think trying to use, somehow, the "write" method would be better.
sorry, i'm new to javascript.

Since most of your code is being repeated, why not just create a function and pass the differences as parameters?

That is a good and simple idea. Thanks. But my question still remains. Is there a better way of making that function smaller?

I'm not entirely certain, but should it be child.htmlFor (instead of child.for)? And apparently: yes.

In the interest(s) of maintainability, flexibility and cross-browser compatibility, you might want to consider using an HTML templating library like Mustache or Jade.

@pdoherty926 I think your comment is really the answer I wanted(although I could approach it with a simple google search that my laziness did not made possible). Make it an answer, would you?

In the interests of maintainability, flexibility and cross-browser compatibility, you might want to consider using an HTML templating library like Mustache or Jade.

Without your accompanying html, or the rest of your javascript, I have no way to really test the following, however, it -should- work.  If it does not, please let me know and I will fix it:
var grid = document.createElement("ul");
grid.style['text-align'] = "left";

// Creates the legend and append it
var child = document.createElement('legend');
child.innerHTML = "Logado - Dados";
loginbox.appendChild(child);

var list_obj = { list:
    [{
        "label": "Usuário:",
        "for": "lusername",
        "arr_key": "username",
        "for2": "username"
    },
    {
        "label": "Membro Desde:",
        "for": "lbirthday",
        "arr_key": "MemberSince",
        "for2": "birthday"
    },
    {
        "label": "Última Visita:",
        "for": "llastvisit",
        "arr_key": "LastVisit",
        "for2": "lastvisit"
    },
    {
        "label": "Frequência de Estudo:",
        "for": "lstudyfrequency",
        "arr_key": "StudyFrequency",
        "for2": "studyfrequency"
    },
    {
        "label": "Faculdade:",
        "for": "lcollege",
        "arr_key": "College",
        "for2": "college"
    },
    {
        "label": "Curso:",
        "for": "lcourse",
        "arr_key": "Course",
        "for2": "course"
    }]
}

for (var i = 0; i < list_obj.list.length; i++) {
    var label = list_obj.list[i]["label"];
    var for1 = list_obj.list[i]["for"];
    var arr_key = list_obj.list[i]["arr_key"];
    var for2 = list_obj.list[i]["for2"];
    print_field(label,for1,arr_key,for2)
}

function print_field(label,for1,arr_key,for2) {
    var cell = document.createElement("li");
    cell.style['padding'] = "0px";
    child = document.createElement('label');
    child.innerHTML = "<b>" + label + " </b>";
    child.htmlFor = for1;
    cell.appendChild(child);
    child = document.createElement('label');
    child.innerHTML = response[arr_key];
    child.htmlFor = for2;
    cell.appendChild(child);
    grid.appendChild(cell);
}​


Actually, I got one way. And i think it's better: http://pastebin.com/0E0Tn0Ca Let me know if your code is better.

@PatrickBassut I would say your code is better, as it takes up less space.
