通過javascript與新創建的html交互

Question

我想從javascript到現有的html頁面中添加一個新的div。 通常，我使用指令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>";

Answer 1

據我所知，用這種方法實現您想要的是不可能的。 而不是使用innerHTML ，您應該做很長的路要走，還創建帶有createElement的所有內部標簽，並將它們附加為子元素。 使用jQuery可以使這項工作輕松了許多 。

這是一個使用jQuery： link和官方API的示例。

或者，如果您可以先創建內部列表，則只需創建內部列表，然后將其作為字符串連接作為innerHTML的一部分（首先創建列表，然后再編輯innerHTML ）。