Javascript 图像输入按钮的动态创建和附加子项不显示为表单元素？

我正在动态创建一个文件上传表单。我将动态创建的表单附加到一个动态创建的div。到目前为止还不错

其中两个表单元素显示为有效的表单字段：类型=文本字段和类型=文件字段

在添加两个type=image字段之后，图像按钮确实会显示在弹出表单中，但由于某种原因，我得到了一个javascript错误“error:TypeError:document.forms.fileform.Upload未定义”

一个警报提示显示document.forms['fileform'].length只有两个元素，而不是我期望的四个元素

在div中创建div和表单的代码：

if(! document.getElementById("fileformdiv")){
  var fileformdiv = document.createElement("div");
  fileformdiv.setAttribute("id","fileformdiv");
  fileformdiv.setAttribute("style","position:relative;top:-200px;left:-250px;height:160px;line-height:30px;width:220px;border:#aaa 1px solid;background:#eee;z-index:10;text-align:left;padding:10px 10px 10px 10px;");
  document.getElementById("stampContainer").appendChild(fileformdiv);

  var fileform = document.createElement("form");
  fileform.setAttribute("enctype","multipart/form-data");
  fileform.setAttribute("id","fileform");
  fileform.setAttribute("name","fileform");

  var descriptionprompt = document.createTextNode("Say something about this file:");

  var filedescription = document.createElement("input");
  filedescription.setAttribute("id","filedescription");
  filedescription.setAttribute("name","filedescription");
  filedescription.setAttribute("type","text");
  filedescription.setAttribute("style","position:relative;width:200px;height:30px;margin:10px 10px 10px 0px;");

  var filename = document.createElement("input");
  filename.setAttribute("id","filename");
  filename.setAttribute("name","filename");
  filename.setAttribute("type","file");
  filename.setAttribute("style","position:relative;width:200px;margin:10px 10px 10px 0px;");

  var uploadbutton = document.createElement("input");
  uploadbutton.setAttribute("name","Upload");
  uploadbutton.setAttribute("id","Upload");
  uploadbutton.setAttribute("type","image");
  uploadbutton.setAttribute("style","position:relative;margin:0px 0px 0px 60px;width:80px;height:30px;");
  uploadbutton.setAttribute("src",baseUrl+"images/upload.gif");

  var cancelbutton = document.createElement("input");
  cancelbutton.setAttribute("name","Cancel");
  cancelbutton.setAttribute("id","Cancel");
  cancelbutton.setAttribute("type","image");
  cancelbutton.setAttribute("style","position:relative;margin:-30px 0px 0px 140px;width:80px;height:30px;");
  cancelbutton.setAttribute("src",baseUrl+"images/cancel.gif");

  var linebreak = document.createElement("br");


  document.getElementById("fileformdiv").appendChild(fileform);
  document.forms['fileform'].appendChild(descriptionprompt);
  document.forms['fileform'].appendChild(filedescription);
  document.forms['fileform'].appendChild(linebreak);
  document.forms['fileform'].appendChild(filename);
  document.forms['fileform'].appendChild(linebreak);
  document.forms['fileform'].appendChild(uploadbutton);
  document.forms['fileform'].appendChild(cancelbutton);

  document.forms['fileform']['Upload'].onclick = function() { submitFile(); return false; };
  document.forms['fileform']['Cancel'].onclick = function() { document.getElementById("fileformdiv").parentNode.removeChild(document.getElementById("fileformdiv")); };

  for(i=0;i<document.forms['fileform'].length;i++){
     alert(document.forms['fileform'][i].name);
  }
}

致：

---

…瞧，脚本运行正常，没有错误。但是，这些字段不会显示为表单字段。但实际上，这并不重要，因为我可以将onclick附加到它们上，它们会做它们应该做的事情

我做了一些搜索，

元素不包括在表单元素集合中请参见备注，因此您不能从表单元素中引用它。因为已经有了对元素的引用，所以应该使用它

if(! document.getElementById("fileformdiv")){
  var fileformdiv = document.createElement("div");
  fileformdiv.setAttribute("id","fileformdiv");
  fileformdiv.setAttribute("style","position:relative;top:-200px;left:-250px;height:160px;line-height:30px;width:220px;border:#aaa 1px solid;background:#eee;z-index:10;text-align:left;padding:10px 10px 10px 10px;");
  document.getElementById("stampContainer").appendChild(fileformdiv);

  var fileform = document.createElement("form");
  fileform.setAttribute("enctype","multipart/form-data");
  fileform.setAttribute("id","fileform");
  fileform.setAttribute("name","fileform");

  var descriptionprompt = document.createTextNode("Say something about this file:");

  var filedescription = document.createElement("input");
  filedescription.setAttribute("id","filedescription");
  filedescription.setAttribute("name","filedescription");
  filedescription.setAttribute("type","text");
  filedescription.setAttribute("style","position:relative;width:200px;height:30px;margin:10px 10px 10px 0px;");

  var filename = document.createElement("input");
  filename.setAttribute("id","filename");
  filename.setAttribute("name","filename");
  filename.setAttribute("type","file");
  filename.setAttribute("style","position:relative;width:200px;margin:10px 10px 10px 0px;");

  var uploadbutton = document.createElement("input");
  uploadbutton.setAttribute("name","Upload");
  uploadbutton.setAttribute("id","Upload");
  uploadbutton.setAttribute("type","image");
  uploadbutton.setAttribute("style","position:relative;margin:0px 0px 0px 60px;width:80px;height:30px;");
  uploadbutton.setAttribute("src",baseUrl+"images/upload.gif");

  var cancelbutton = document.createElement("input");
  cancelbutton.setAttribute("name","Cancel");
  cancelbutton.setAttribute("id","Cancel");
  cancelbutton.setAttribute("type","image");
  cancelbutton.setAttribute("style","position:relative;margin:-30px 0px 0px 140px;width:80px;height:30px;");
  cancelbutton.setAttribute("src",baseUrl+"images/cancel.gif");

  var linebreak = document.createElement("br");


  fileformdiv.appendChild(fileform);
  fileform.appendChild(descriptionprompt);
  fileform.appendChild(filedescription);
  fileform.appendChild(linebreak);
  fileform.appendChild(filename);
  fileform.appendChild(linebreak);
  fileform.appendChild(uploadbutton);
  fileform.appendChild(cancelbutton);

  uploadbutton.onclick = function() { submitFile(); return false; };
  cancelbutton.onclick = function() { fileformdiv.parentNode.removeChild(fileformdiv); };

  for(i=0;i<fileform.length;i++){
     alert(fileform[i].name);
  }
}

if（！document.getElementById（“fileformdiv”））{
var fileformdiv=document.createElement（“div”）；
setAttribute（“id”、“fileformdiv”）；
fileformdiv.setAttribute（“样式”、“位置：相对；顶部：-200px；左侧：-250px；高度：160px；线条高度：30px；宽度：220px；边框：#aaa 1px实心；背景：#eee；z索引：10；文本对齐：左侧；填充：10px 10px 10px 10px；”；
document.getElementById（“stampContainer”）.appendChild（fileformdiv）；
var fileform=document.createElement（“表单”）；
setAttribute（“enctype”、“多部分/表单数据”）；
setAttribute（“id”、“fileform”）；
setAttribute（“名称”、“文件格式”）；
var descriptionprompt=document.createTextNode（“说说这个文件：”）；
var filedescription=document.createElement（“输入”）；
setAttribute（“id”、“filedescription”）；
setAttribute（“名称”、“文件描述”）；
setAttribute（“类型”、“文本”）；
setAttribute（“样式”，“位置：相对；宽度：200px；高度：30px；边距：10px 10px 10px 0px；”）；
var filename=document.createElement（“输入”）；
setAttribute（“id”、“filename”）；
setAttribute（“名称”、“文件名”）；
setAttribute（“类型”、“文件”）；
setAttribute（“样式”，“位置：相对；宽度：200px；边距：10px 10px 0px；”）；
var uploadbutton=document.createElement（“输入”）；
setAttribute（“名称”、“上载”）；
setAttribute（“id”，“Upload”）；
setAttribute（“类型”、“图像”）；
uploadbutton.setAttribute（“样式”，“位置：相对；边距：0px 0px 0px 60px；宽度：80px；高度：30px；”）；
setAttribute（“src”，baseUrl+“images/upload.gif”）；
var cancelbutton=document.createElement（“输入”）；
cancelbutton.setAttribute（“名称”、“取消”）；
取消按钮。设置属性（“id”、“取消”）；
cancelbutton.setAttribute（“类型”、“图像”）；
取消按钮.setAttribute（“样式”，“位置：相对；边距：-30px 0px 140px；宽度：80px；高度：30px；”）；
setAttribute（“src”，baseUrl+“images/cancel.gif”）；
var linebreak=document.createElement（“br”）；
fileformdiv.appendChild（fileform）；
appendChild（descriptionprompt）；
fileform.appendChild（filedescription）；
fileform.appendChild（换行符）；
appendChild（文件名）；
fileform.appendChild（换行符）；
appendChild（上传按钮）；
appendChild（取消按钮）；
uploadbutton.onclick=function（）{submitFile（）；返回false；}；
cancelbutton.onclick=function（）{fileformdiv.parentNode.removeChild（fileformdiv）；}；
对于（i=0；i我进行了一些搜索，
元素不包括在表单元素集合中，请参见备注，因此您不能从表单元素引用它。由于您已经有了对元素的引用，因此应该使用它

if(! document.getElementById("fileformdiv")){
  var fileformdiv = document.createElement("div");
  fileformdiv.setAttribute("id","fileformdiv");
  fileformdiv.setAttribute("style","position:relative;top:-200px;left:-250px;height:160px;line-height:30px;width:220px;border:#aaa 1px solid;background:#eee;z-index:10;text-align:left;padding:10px 10px 10px 10px;");
  document.getElementById("stampContainer").appendChild(fileformdiv);

  var fileform = document.createElement("form");
  fileform.setAttribute("enctype","multipart/form-data");
  fileform.setAttribute("id","fileform");
  fileform.setAttribute("name","fileform");

  var descriptionprompt = document.createTextNode("Say something about this file:");

  var filedescription = document.createElement("input");
  filedescription.setAttribute("id","filedescription");
  filedescription.setAttribute("name","filedescription");
  filedescription.setAttribute("type","text");
  filedescription.setAttribute("style","position:relative;width:200px;height:30px;margin:10px 10px 10px 0px;");

  var filename = document.createElement("input");
  filename.setAttribute("id","filename");
  filename.setAttribute("name","filename");
  filename.setAttribute("type","file");
  filename.setAttribute("style","position:relative;width:200px;margin:10px 10px 10px 0px;");

  var uploadbutton = document.createElement("input");
  uploadbutton.setAttribute("name","Upload");
  uploadbutton.setAttribute("id","Upload");
  uploadbutton.setAttribute("type","image");
  uploadbutton.setAttribute("style","position:relative;margin:0px 0px 0px 60px;width:80px;height:30px;");
  uploadbutton.setAttribute("src",baseUrl+"images/upload.gif");

  var cancelbutton = document.createElement("input");
  cancelbutton.setAttribute("name","Cancel");
  cancelbutton.setAttribute("id","Cancel");
  cancelbutton.setAttribute("type","image");
  cancelbutton.setAttribute("style","position:relative;margin:-30px 0px 0px 140px;width:80px;height:30px;");
  cancelbutton.setAttribute("src",baseUrl+"images/cancel.gif");

  var linebreak = document.createElement("br");


  fileformdiv.appendChild(fileform);
  fileform.appendChild(descriptionprompt);
  fileform.appendChild(filedescription);
  fileform.appendChild(linebreak);
  fileform.appendChild(filename);
  fileform.appendChild(linebreak);
  fileform.appendChild(uploadbutton);
  fileform.appendChild(cancelbutton);

  uploadbutton.onclick = function() { submitFile(); return false; };
  cancelbutton.onclick = function() { fileformdiv.parentNode.removeChild(fileformdiv); };

  for(i=0;i<fileform.length;i++){
     alert(fileform[i].name);
  }
}

if（！document.getElementById（“fileformdiv”））{
var fileformdiv=document.createElement（“div”）；
setAttribute（“id”、“fileformdiv”）；
fileformdiv.setAttribute（“样式”、“位置：相对；顶部：-200px；左侧：-250px；高度：160px；线条高度：30px；宽度：220px；边框：#aaa 1px实心；背景：#eee；z索引：10；文本对齐：左侧；填充：10px 10px 10px 10px；”；
document.getElementById（“stampContainer”）.appendChild（fileformdiv）；
var fileform=document.createElement（“表单”）；
setAttribute（“enctype”、“多部分/表单数据”）；
setAttribute（“id”、“fileform”）；
setAttribute（“名称”、“文件格式”）；
var descriptionprompt=document.createTextNode（“说说这个文件：”）；
var filedescription=document.createElement（“输入”）；
setAttribute（“id”、“filedescription”）；
setAttribute（“名称”、“文件描述”）；
setAttribute（“类型”、“文本”）；
setAttribute（“样式”，“位置：相对；宽度：200px；高度：30px；边距：10px 10px 10px 0px；”）；
var filename=document.createElement（“输入”）；
setAttribute（“id”、“filename”）；
setAttribute（“名称”、“文件名”）；
setAttribute（“类型”、“文件”）；
setAttribute（“样式”，“位置：相对；宽度：200px；边距：10px 10px 0px；”）；
var uploadbutton=document.createElement（“输入”）；
setAttribute（“名称”、“上载”）；
setAttribute（“id”，“Upload”）；
setAttribute（“类型”、“图像”）；
uploadbutton.setAttribute（“样式”，“位置：相对；边距：0px 0px 0px 60px；宽度：80px；高度：30px；”）；
setAttribute（“src”，baseUrl+“images/upload.gif”）；
var cancelbutton=document.createElement（“输入”）；
cancelbutton.setAttribute（“名称”、“取消”）；
取消按钮。设置属性（“id”、“取消”）；
cancelbutton.setAttribute（“类型”、“图像”）；
取消按钮.setAttribute（“样式”，“位置：相对；边距：-30px 0px 140px；宽度：80px；高度：30px；”）；
cancelbutton.setAttribute（“src”，baseUrl+”
if(! document.getElementById("fileformdiv")){
  var fileformdiv = document.createElement("div");
  fileformdiv.setAttribute("id","fileformdiv");
  fileformdiv.setAttribute("style","position:relative;top:-200px;left:-250px;height:160px;line-height:30px;width:220px;border:#aaa 1px solid;background:#eee;z-index:10;text-align:left;padding:10px 10px 10px 10px;");
  document.getElementById("stampContainer").appendChild(fileformdiv);

  var fileform = document.createElement("form");
  fileform.setAttribute("enctype","multipart/form-data");
  fileform.setAttribute("id","fileform");
  fileform.setAttribute("name","fileform");

  var descriptionprompt = document.createTextNode("Say something about this file:");

  var filedescription = document.createElement("input");
  filedescription.setAttribute("id","filedescription");
  filedescription.setAttribute("name","filedescription");
  filedescription.setAttribute("type","text");
  filedescription.setAttribute("style","position:relative;width:200px;height:30px;margin:10px 10px 10px 0px;");

  var filename = document.createElement("input");
  filename.setAttribute("id","filename");
  filename.setAttribute("name","filename");
  filename.setAttribute("type","file");
  filename.setAttribute("style","position:relative;width:200px;margin:10px 10px 10px 0px;");

  var uploadbutton = document.createElement("input");
  uploadbutton.setAttribute("name","Upload");
  uploadbutton.setAttribute("id","Upload");
  uploadbutton.setAttribute("type","image");
  uploadbutton.setAttribute("style","position:relative;margin:0px 0px 0px 60px;width:80px;height:30px;");
  uploadbutton.setAttribute("src",baseUrl+"images/upload.gif");

  var cancelbutton = document.createElement("input");
  cancelbutton.setAttribute("name","Cancel");
  cancelbutton.setAttribute("id","Cancel");
  cancelbutton.setAttribute("type","image");
  cancelbutton.setAttribute("style","position:relative;margin:-30px 0px 0px 140px;width:80px;height:30px;");
  cancelbutton.setAttribute("src",baseUrl+"images/cancel.gif");

  var linebreak = document.createElement("br");


  fileformdiv.appendChild(fileform);
  fileform.appendChild(descriptionprompt);
  fileform.appendChild(filedescription);
  fileform.appendChild(linebreak);
  fileform.appendChild(filename);
  fileform.appendChild(linebreak);
  fileform.appendChild(uploadbutton);
  fileform.appendChild(cancelbutton);

  uploadbutton.onclick = function() { submitFile(); return false; };
  cancelbutton.onclick = function() { fileformdiv.parentNode.removeChild(fileformdiv); };

  for(i=0;i<fileform.length;i++){
     alert(fileform[i].name);
  }
}