Question

是否有更好的动态创建信息字段集的方法：

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

我认为尝试以某种方式使用“写”方法会更好。抱歉，我是javascript的新手。

Answer 1

如果没有随附的html或其余的javascript，我无法真正测试以下内容，但是，它应该起作用。如果没有，请告诉我，我会解决它：

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

Answer 2

出于可维护性，灵活性和跨浏览器兼容性的考虑，您可能需要考虑使用HTML模板库，如Mustache或Jade。

使用javascript动态创建标签

2 个答案: