Creating labels dynamically with javascript

Question

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? — j08691
– j08691, Commented Sep 16, 2012 at 21:14
That is a good and simple idea. Thanks. But my question still remains. Is there a better way of making that function smaller? — Patrick Bassut
– Patrick Bassut, Commented Sep 16, 2012 at 21:15
I'm not entirely certain, but should it be child.htmlFor (instead of child.for)? And apparently: yes. — David Thomas
– David Thomas, Commented Sep 16, 2012 at 21:20
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
– pdoherty926, Commented Sep 16, 2012 at 21:24
@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? — Patrick Bassut
– Patrick Bassut, Commented Nov 2, 2013 at 18:05

pdoherty926 · Accepted Answer · 2013-11-02 18:08:01Z

1

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

answered Nov 2, 2013 at 18:08

pdoherty926

10.6k5 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daedalus · Accepted Answer · 2012-09-16 22:09:19Z

1

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);
}

edited Sep 16, 2012 at 22:09

answered Sep 16, 2012 at 22:02

Daedalus

7,7125 gold badges40 silver badges64 bronze badges

2 Comments

Patrick Bassut Over a year ago

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

Daedalus Over a year ago

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

Collectives™ on Stack Overflow

Creating labels dynamically with javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related