4

我想从 javascript 添加一个新的 div 到我现有的 html 页面。通常我使用指令 document.createElement("div") 执行此操作，并使用方法 div.innerHTML = "" 填充此 div（例如）。这在大多数情况下都可以正常工作，但现在我想在我的 div 中添加一个选择列表并用一些数据填充这个列表。此方法不起作用：

function initEdit(){
     addPanel = document.createElement("div");
     addPanel.innerHTML = "<form id='addProperty' method='get'> <table>" +
                                "<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'> </td>" +
                                     "<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
                                          "<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
                                "<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'> </td>" +
                                     "<td> </td> </tr>" +
                                "<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
                            "</table> </form>";

    $('body').jAlert(contents, 'info', offset);
    list1.forEach(function(element, id){
        var option = document.createElement("OPTION");
        option.text = option.value = property;
        form.data_property_selection.options.add(element);
    })
}

有谁知道如何解决这个问题？（顺便说一句：我不能在页面开头设置这个html代码，因为这是一个jAlert div的内容）

更新：解决方案

properties1.concat(properties2).forEach(function(property, id){
    if (id < object_properties.length) propertyList1 += "<option value='" + property + "'>" + property + "</option>";
    else propertyList2 += "<option value='" + property + "'>" + property + "</option>";
})
objects.forEach(function(feature, id) {
    objectList += "<option value='" + feature._id + "'>" + feature.name + "</option>";
})

propertyList = "<form id='addProperty' method='get'> <table>" +
                            "<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'>" +
                                       propertyList1 + "</select> </td>" +
                                 "<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
                                       objectList + "</select> </td>" +
                                      "<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
                            "<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'>" +
                                       propertyList2 + "</select> </td>" +
                                 "<td> </td> </tr>" +
                            "<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
                        "</table> </form>";
4

1 回答 1

3

据我所知，用这种方法实现你想要的是不可能的。而不是使用innerHTML，您应该做很长的路，用 createElement 创建所有内部标签，并将它们作为子标签附加。使用 jQuery 可以使这项工作变得容易得多。

下面是一个如何使用 jQuery 进行操作的示例：link和官方 API。

或者，如果您可以先创建内部列表，则只需创建它并将其连接为字符串作为其中的一部分innerHTML（首先创建列表，然后编辑innerHTML）。

于 2012-04-16T17:59:50.227 回答