关于js创建table时IE和火狐的区别

在做项目的时候，有个需求是：点一个按钮要添加一个table表单。
部分代码如下(其中surveyIdIndex，optionIdIndex，optionPIdIndex是全局变量）：

var obj = document.getElementById("surveyid");

var tableNode = document.createElement("table");
tableNode.setAttribute("width", "100%");
tableNode.setAttribute("border", 0);
tableNode.setAttribute("cellpadding", 0);
tableNode.setAttribute("cellspacing", 0);
tableNode.setAttribute("id", "surveyTable" + surveyIdIndex);

// 第一行
var row1Node = document.createElement("tr");
var th1Node = document.createElement("th");
th1Node.appendChild(document.createTextNode("调查题目" + (surveyIdIndex + 1) + "："));
row1Node.appendChild(th1Node);

var td1Node = document.createElement("td");
var textFiled1 = document.createElement("input");
textFiled1.setAttribute("name", "surveyTitle_" + surveyIdIndex);
textFiled1.setAttribute("type", "text");
textFiled1.setAttribute("id", "title");
//textFiled1.setAttribute("class", "input400");
if( !window.addEventListener){ // IE
textFiled1.className="input400";
}else{ // FF

textFiled1.setAttribute("class", "input400");
}
td1Node.appendChild(textFiled1);

var textFiled_1 = document.createElement("input");
textFiled_1.setAttribute("name", "add");
textFiled_1.setAttribute("type", "button");
textFiled_1.setAttribute("value", " - ");

if( !window.addEventListener){ // IE
textFiled_1.className="add2";
textFiled_1.attachEvent("onclick", function(){delete_newsurvey(tempSurvyIndex);});
}else{ // FF
textFiled_1.setAttribute("class", "add2");
textFiled_1.addEventListener('click', function(){delete_newsurvey(tempSurvyIndex);}, false);
}

//textFiled_1.onclick = function(){delete_newsurvey(tempSurvyIndex);};
td1Node.appendChild(textFiled_1);

row1Node.appendChild(td1Node);
tableNode.appendChild(row1Node);

// 第二行
var row2Node = document.createElement("tr");
var th2Node = document.createElement("th");
th2Node.appendChild(document.createTextNode("选项形式："));
row2Node.appendChild(th2Node);

var td2Node = document.createElement("td");
var textFiled2 = document.createElement("input");
textFiled2.setAttribute("name", "surveyType_" + surveyIdIndex);
textFiled2.setAttribute("type", "radio");
textFiled2.setAttribute("id", "danxuan");
if( !window.addEventListener){ // IE
textFiled2.className="radio";
}else{ // FF

textFiled2.setAttribute("class", "radio");
}
textFiled2.setAttribute("value", "0");
textFiled2.setAttribute("checked", "true");
td2Node.appendChild(textFiled2);

var labelNode1 = document.createElement("label");
labelNode1.setAttribute("for", "danxuan");
labelNode1.appendChild(document.createTextNode("单选形式"));
td2Node.appendChild(labelNode1);

var textFiled_2 = document.createElement("input");
textFiled_2.setAttribute("name", "surveyType_" + surveyIdIndex);
textFiled_2.setAttribute("type", "radio");
textFiled_2.setAttribute("id", "duoxuan");
if( !window.addEventListener){ // IE
textFiled_2.className="radio";
}else{ // FF

textFiled_2.setAttribute("class", "radio");
}
textFiled_2.setAttribute("value", "1");
td2Node.appendChild(textFiled_2);

var labelNode2 = document.createElement("label");
labelNode2.setAttribute("for", "duoxuan");
labelNode2.appendChild(document.createTextNode("多选形式"));
td2Node.appendChild(labelNode2);

row2Node.appendChild(td2Node);
tableNode.appendChild(row2Node);

// 第三行
var row3Node = document.createElement("tr");
var th3Node = document.createElement("th");
th3Node.appendChild(document.createTextNode("选　　项："));
row3Node.appendChild(th3Node);

var td3Node = document.createElement("td");

var div3Node = document.createElement("div");
div3Node.setAttribute("id", "optionid" + optionIdIndex);

var p3Node = document.createElement("p");
p3Node.setAttribute("id", "optionP" + optionPIdIndex);

var textFiled3 = document.createElement("input");
textFiled3.setAttribute("name", "surveyOptSurveyname_" + surveyIdIndex);
textFiled3.setAttribute("type", "text");
if( !window.addEventListener){ // IE
textFiled3.className="input80";
}else{ // FF

textFiled3.setAttribute("class", "input80");
}
p3Node.appendChild(textFiled3);

p3Node.appendChild(document.createTextNode("链接："));
var textFiled3_link = document.createElement("input");
textFiled3_link.setAttribute("name", "surveyOptSurveylink_" + surveyIdIndex);
textFiled3_link.setAttribute("type", "text");
if( !window.addEventListener){ // IE
textFiled3_link.className="input80";
}else{
textFiled3_link.setAttribute("class", "input80");
}
p3Node.appendChild(textFiled3_link);

p3Node.appendChild(document.createTextNode("图片："));
var textFiled3_pic = document.createElement("input");
textFiled3_pic.setAttribute("name", "surveyOptPicfile_" + surveyIdIndex + "_" + (optionPIdIndex + 1));
textFiled3_pic.setAttribute("type", "file");
if( !window.addEventListener){ // IE
textFiled3_pic.className="input200";
}else{ // FF

textFiled3_pic.setAttribute("class", "input200");
}
p3Node.appendChild(textFiled3_pic);

var textFiled3_add = document.createElement("input");
textFiled3_add.setAttribute("name", "add");
//textFiled3_link.setAttribute("class", "add2");
textFiled3_add.setAttribute("type", "button");
textFiled3_add.setAttribute("value", " + ");

if(!window.addEventListener){ // IE
textFiled3_link.className = "add2";
textFiled3_add.attachEvent("onclick", function(){add_newopition(tempSurvyIndex, tempOptIndex);});

}else{ // FF

textFiled3_link.setAttribute("class", "add2");
textFiled3_add.addEventListener('click', function(){add_newopition(tempSurvyIndex, tempOptIndex);}, false);
}

//textFiled3_add.onclick = function(){add_newopition(tempSurvyIndex, tempOptIndex);};

p3Node.appendChild(textFiled3_add);

div3Node.appendChild(p3Node);
td3Node.appendChild(div3Node);
row3Node.appendChild(td3Node);
tableNode.appendChild(row3Node);

alert("---" +　tableNode.outerHTML);

obj.appendChild(tableNode)

发现在火狐下，能正确创建table，并能显示出效果。而在IE同过alert可以看出创建了元素，但页面上看不到效果。仔细一看，在创建的input标签中都缺失了“name”属性（尽管代码中设置了此属性）。

以为此是原因之所在。后来去网上找了下。之所以在ie下创建的“input”元素的“name”属性会缺失，是因为不能像这样去创建“input”元素（火狐则可以）：
var textFiled_2 = document.createElement("input");
textFiled_2.setAttribute("name", "surveyType_" + surveyIdIndex);
textFiled_2.setAttribute("type", "radio");
textFiled_2.setAttribute("id", "duoxuan");

而应该像这样去创建：
var textFiled_2 = document.createElement("<input name=/"surveyType_" + surveyIdIndex + "/" >"");
textFiled_2.setAttribute("type", "radio");
textFiled_2.setAttribute("id", "duoxuan");
通过这样去创建的input元素的“name”属性才不会缺失。

但是发现这样创建的标签，虽然属性都没有缺失了，但在ie下还是看不到效果。（说明属性缺失不是在ie显示不出的真正原因）。

后来又到网上找了一下，发现在ie下创建“table”元素（想要看到创建的效果），不应该把创建的“tr”标签直接通过appendChild（）追加到“table”下面；而应该现创建一个“tbody”标签，然后把创建的“tr”标签通过appendChild（）追加到“tbody”标签下面，最后再把“tbody”标签通过appendChild（）追加到“table”标签下面，这样才能看到效果（所以这才是症结之所在）！而在火狐下则无需此行！