[英]HTML DOM - element.appendChild() doesn't behave as I expect it to
link to code (js and css can be found through the page source): https://dl.dropboxusercontent.com/u/16952797/webdev/uppg1/kontakt.html alt link: http://jsfiddle.net/DdQhk/ (although jsfiddle does not render the page properly) 链接到代码(可通过页面源代码找到js和css): https : //dl.dropboxusercontent.com/u/16952797/webdev/uppg1/kontakt.html alt链接: http : //jsfiddle.net/DdQhk/ (尽管jsfiddle无法正确呈现页面)
relevant lines of code (function createFormBug() - line 31 to 66 in kontakt.js) code: 相关代码行(函数createFormBug()-kontakt.js中的31至66行)代码:
function createFormBug() {
var form = document.createElement("form");
var fieldset = document.createElement("fieldset");
var legend = document.createElement("legend");
var labelFunction = document.createElement("label");
var labelInterface = document.createElement("label");
var labelComment = document.createElement("label");
var radioFunction = document.createElement("input");
radioFunction.type = "radio";
var radioInterface = document.createElement("input");
radioInterface.type = "radio";
var textarea = document.createElement("textarea");
var buttonSubmit = document.createElement("input");
radioInterface.type = "submit";
form.id = "formBug";
legend.textContent = "Bugg";
document.getElementById("divForm").appendChild(form);
form.appendChild(fieldset);
fieldset.appendChild(legend);
fieldset.appendChild(labelFunction);
fieldset.appendChild(radioFunction);
fieldset.appendChild(labelInterface);
fieldset.appendChild(radioInterface);
fieldset.appendChild(labelComment);
fieldset.appendChild(textarea);
fieldset.appendChild(buttonSubmit);
}
context: I'm trying to create a form dynamically by using js, unfortunately some elements aren't being appended for some reason. 上下文:我正在尝试通过使用js动态创建表单,不幸的是,由于某些原因未添加某些元素。
partial output of generated html when run on Chrome (relevant section): 在Chrome上运行时生成的html的部分输出(相关部分):
<div id="divForm">
<form id="formBug">
<fieldset>
<legend>Bugg</legend>
<label></label>
<input type="radio">
<label></label>
<input type="submit">
<label></label>
<textarea></textarea>
<input>
</fieldset>
</form>
</div>
I think your code is working pretty much as you might expect it to. 我认为您的代码可以正常工作。 The only obvious mistake is that you are setting radioInterface.type = "submit";
唯一明显的错误是您正在设置radioInterface.type = "submit";
where you presumably mean buttonSubmit.type = "submit";
您大概是指buttonSubmit.type = "submit";
. 。
It should be apparent that this works fine if you actually put some content in to make elements like label
actually visible... 显然,如果您实际上放入一些内容以使诸如label
元素实际可见,则此方法很好用...
Something like this, perhaps? 大概是这样吗?
var form = document.createElement("form");
var fieldset = document.createElement("fieldset");
var legend = document.createElement("legend");
var labelFunction = document.createElement("label");
labelFunction.textContent = 'Function'; // <-- added
var labelInterface = document.createElement("label");
labelInterface.textContent = 'Interface'; // <-- added
var labelComment = document.createElement("label");
labelComment.textContent = 'Comment'; // <-- added
var radioFunction = document.createElement("input");
radioFunction.type = "radio";
var radioInterface = document.createElement("input");
radioInterface.type = "radio";
var textarea = document.createElement("textarea");
var buttonSubmit = document.createElement("input");
buttonSubmit.type = "submit"; // <-- corrected
I believe your code to actually add them to the document should be working fine. 我相信您将其实际添加到文档中的代码应该可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.