通过JavaScript与新创建的HTML交互

4

我希望能够在现有的html页面中使用javascript添加一个新的div。通常情况下,我会使用document.createElement("div")指令创建这个div,并且使用div.innerHTML = ""方法来填充这个div(例如)。在大多数情况下,这种方法都可以正常工作,但是现在我想给我的div添加一个selectionlist,并用一些数据填充这个列表。这种方法不起作用:

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

你似乎实际上没有将创建的 div 添加到页面中。你不需要在某个地方使用 document.body.appendChild(addPanel) 吗? - Ian Newson
我更新了帖子:代码版本错误。该内容被jAlert使用。 - JasperTack
尝试查看jQuery委托函数(delegate function),它允许访问由JavaScript生成的DOM。 - cyber-guard
你的代码似乎有些含糊不清,能否在jsfiddle.net上创建一个简单的演示? - codef0rmer
1个回答

3
据我所知,使用这种方法实现您想要的是不可能的。您应该使用createElement等方式创建所有内部标签,并将它们作为子元素附加。使用jQuery可以使这项工作变得更加容易。
以下是使用jQuery的示例:链接,以及官方API
或者,如果您可以先创建内部列表,那么只需将其作为字符串连接到innerHTML的一部分中(先创建列表,然后再编辑innerHTML)。

谢谢您的建议,为了加快速度,我选择了第二种解决方案(我在问题末尾添加了我的解决方案)。 - JasperTack

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接