通过 javascript 与新创建的 html 交互
Posted
技术标签:
【中文标题】通过 javascript 与新创建的 html 交互【英文标题】:interact with newly created html via javascript 【发布时间】:2012-04-28 01:47:14 【问题描述】:我想从 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);
)
有人知道如何解决这个问题吗? (BTW:我不能在页面开头设置这个html代码,因为这是一个jAlertdiv的内容)
更新:解决方案
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) 某处吗? 我更新了帖子:这是代码的错误版本。内容被 jAlert 使用 尝试查看jQuery委托函数,它允许访问js生成的DOM 你的代码看起来很模糊,你能在 jsfiddle.net 上创建一个简单的演示 【参考方案1】:据我所知,用这种方法实现你想要的是不可能的。而不是使用innerHTML
,你应该做很长的路,用createElement创建所有内部标签,并将它们作为子标签附加。使用 jQuery 可以让这项工作轻松很多。
下面是一个如何使用 jQuery 的示例:link 和 official API。
或者,如果您可以先创建内部列表,则只需创建它并将其连接为字符串作为innerHTML
的一部分(先创建列表,然后再编辑innerHTML
)。
【讨论】:
感谢您的建议,为了加快速度,我选择了第二种解决方案(我在问题末尾添加了我的解决方案)以上是关于通过 javascript 与新创建的 html 交互的主要内容,如果未能解决你的问题,请参考以下文章
Jquery 与新的 Javascript 框架/库(Angular、Ember、React 等)[关闭]
Python Pandas SettingWithCopyWarning 副本与新对象