[英]HTML DOM - element.appendChild() doesn't behave as I expect it to
鏈接到代碼(可通過頁面源代碼找到js和css): https : //dl.dropboxusercontent.com/u/16952797/webdev/uppg1/kontakt.html alt鏈接: http : //jsfiddle.net/DdQhk/ (盡管jsfiddle無法正確呈現頁面)
相關代碼行(函數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);
}
上下文:我正在嘗試通過使用js動態創建表單,不幸的是,由於某些原因未添加某些元素。
在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>
我認為您的代碼可以正常工作。 唯一明顯的錯誤是您正在設置radioInterface.type = "submit";
您大概是指buttonSubmit.type = "submit";
。
顯然,如果您實際上放入一些內容以使諸如label
元素實際可見,則此方法很好用...
大概是這樣嗎?
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
我相信您將其實際添加到文檔中的代碼應該可以正常工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.