通过javascript与新创建的html进行交互

我想从javascript中添加一个新的div到我现有的html页面。通常我用指令document.createElement（“div”）来做到这一点，我用方法div.innerHTML =“”填充这个div（例如）。这在大多数情况下工作正常，但现在我想添加一个选择列表到我的div并填充这些列表的一些数据。此方法不起作用：通过javascript与新创建的html进行交互

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

来源

2012-04-16 Consec

您似乎实际上并未将创建的div添加到页面中。你不需要document.body.appendChild（addPanel）吗？ – 2012-04-16 17:54:27

我更新了帖子：这是代码的错误版本。 jAlert – Consec 2012-04-16 18:01:36

使用的内容尝试查看jQuery委托函数，它允许访问js生成的DOM – 2012-04-16 18:08:46

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

以下是如何使用jQuery执行此操作的示例：link和official API。

另外，如果你可以先创建内部列表，然后就创建并连接它作为一个字符串的innerHTML的一部分（第一榜上无名，只有编辑innerHTML）。

来源

2012-04-16 17:59:50

感谢你的建议，加快速度我用第二种解决方案（我在问题的最后添加了我的解决方案） – Consec 2012-04-16 21:21:07

通过javascript与新创建的html进行交互

回答

相关问题