通过javascript与新创建的html交互
我想将一个新的div从javascript添加到我现有的html页面中。通常,我使用说明文档.createElement(“div”)来完成这项工作,并使用methode div.innerHTML=“”(例如)填充此div。这在大多数情况下都很好,但现在我想在我的div中添加一个selectionlist,并用一些数据填充这个列表。此方法不起作用:通过javascript与新创建的html交互,javascript,html,innerhtml,Javascript,Html,Innerhtml,我想将一个新的div从javascript添加到我现有的html页面中。通常,我使用说明文档.createElement(“div”)来完成这项工作,并使用methode div.innerHTML=“”(例如)填充此div。这在大多数情况下都很好,但现在我想在我的div中添加一个selectionlist,并用一些数据填充这个列表。此方法不起作用: function initEdit(){ addPanel = document.createElement("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);
})
}
函数initEdit(){
addPanel=document.createElement(“div”);
addPanel.innerHTML=“”+
" " +
" " +
" " +
" " +
" " +
" " +
" ";
$('body').jAlert(内容,'info',偏移量);
列表1.forEach(函数(元素,id){
var option=document.createElement(“选项”);
option.text=option.value=property;
form.data\u property\u selection.options.add(元素);
})
}
有人知道怎么解决这个问题吗?(顺便说一句:我不能在页面开头设置此html代码,因为这是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>";
properties1.concat(properties2).forEach(函数(属性,id){
如果(id
据我所知,用这种方法实现你想要的是不可能的。您不应该使用innerHTML
,而应该做很长的工作,使用createElement创建所有内部标记,并将它们作为子项附加。使用jQuery可以使这项工作更容易
下面是一个如何使用jQuery:和的示例
或者,如果您可以首先创建内部列表,那么只需创建它并将其作为字符串连接为
innerHTML
(首先创建列表,然后编辑innerHTML
)。您似乎没有实际将创建的div添加到页面中。你不需要document.body.appendChild(addPanel)吗?我更新了帖子:这是错误的代码版本。jAlerttry使用这些内容来研究jQuery委托函数,该函数允许访问js生成的DOM。您的代码似乎很模糊,能否在jsfiddle.net上创建一个简单的演示谢谢您的建议,为了加快速度,我选择了第二个解决方案(我在问题的末尾添加了我的解决方案)