DOm working in IE but no in firefox... help please!

[apog]

Hello, I am a newbie in DOM, but I wrote this code and works perfectly with IE, but it don't in firefox... when i run the function in firefox nothing happends...

here is the code:
function add_div_field () {

var ni = document.getElementById('upload_div');
var num = contador_upload++;
var div = document.createElement("div");
var div_name = "filediv"+num;
div.setAttribute("id",div_name);

var table1 = document.createElement("<table width='100%' class='table0' border='0'>");
//table1.setStyle("width","100%");
//table1.setAtrribute("class","table0");
//table1.setAtrribute("className","table0");

var tbody1 = document.createElement("tbody");

var tr1 = document.createElement("<tr width='100%' id='upload_table"+num+"'>");
//tr1.setAtrribute("width","100%");
//tr1.setAtrribute("id",'upload_table'+num);

var td1 = document.createElement("<td width='13'>");
//td1.setAtrribute("width",13);

var strong1 = document.createElement("strong");
var txtno = document.createTextNode(num+'.');

strong1.appendChild(txtno);

td1.appendChild(strong1);

var td2 = document.createElement("<td width='700' valign='middle' class='grey_small'>");
//td2.setAtrribute("width","700");
//td2.setAtrribute("valign","middle");
//td2.setAtrribute("class","grey_small");
//td2.setAtrribute("className","grey_small");

var div2 = document.createElement("<div id='file"+num+"' class='showme'>");
//div2.setAtrribute("id","file"+num);
//div2.setAtrribute("class","showme");
//div2.setAtrribute("className","showme");

var iframe = document.createElement("<iframe align='middle' marginheight='0' scrolling='no' marginwidth='0' frameborder='0' width='300' height='22' src='upload2.php?upload_id="+num+"'>");
//iframe.setAtrribute("align","middle");
//iframe.setAtrribute("marginheight",0);
//iframe.setAtrribute("scrolling","no");
//iframe.setAtrribute("marginwidth",0);
//iframe.setAtrribute("frameborder",0);
//iframe.setAtrribute("width",300);
//iframe.setAtrribute("height",22);
//iframe.setAtrribute("src","upload2.php?upload_id="+num);

div2.appendChild(iframe);

var div3 = document.createElement("<div id='waiting"+num+"' class='hideme'>");
//div3.setAttribute("id","waiting"+num);
//div3.setAttribute("class","hideme");
//div3.setAttribute("className","hideme");

var txtwaiting = document.createTextNode(' Subiendo imagen, espera unos instantes...');
var br = document.createElement("br");

var imgwaiting = document.createElement('<img src="pics/uploading.gif" width="220" height="19" align="absmiddle">');
//imgwaiting.src = "pics/uploading.gif";
//imgwaiting.setAtrribute("width",220);
//imgwaiting.setAtrribute("height",19);
//imgwaiting.setAtrribute("align","absmiddle");

div3.appendChild(txtwaiting);
div3.appendChild(br);
div3.appendChild(imgwaiting);

var div4 = document.createElement("<div id='end_upload"+num+"' class='hideme'>");
//div4.setAttribute("id","end_upload"+num);
//div4.setAttribute("class","hideme");
//div4.setAttribute("className","hideme");

var table2 = document.createElement("<table width='100%'>");
//table2.setAtrribute("width","100%");

var tbody2 = document.createElement("tbody");

var tr2 = document.createElement("tr");

var td3 = document.createElement("<td height='10'>");
//td3.setAtrribute("height",10);

tr2.appendChild(td3);

var tr3 = document.createElement("tr");
var td4 = document.createElement("td");
var txttitle = document.createTextNode("Título:");

td4.appendChild(txttitle);
tr3.appendChild(td4);

var tr4 = document.createElement("tr");
var td5 = document.createElement("td");

var inputTitle = document.createElement("<input type='text' name='title["+num+"]' id='title["+num+"]'>");
var inputTitleName = "title["+num+"]";
//inputTitle.type = 'text';
//inputTitle.setAttribute("id",inputTitleName);
//inputTitle.setAttribute("name",inputTitleName);

td5.appendChild(inputTitle);
tr4.appendChild(td5);

var tr5 = document.createElement("tr");
var td6 = document.createElement("td");

var txtdesc = document.createTextNode("Descripción Opcional:");

td6.appendChild(txtdesc);
tr5.appendChild(td6);

var tr6 = document.createElement("tr");
var td7 = document.createElement("td");

var inputDesc = document.createElement("<textarea id='desc["+num+"]' name='desc["+num+"]' cols='40' rows='4'>");
var inputDescName = "desc["+num+"]";
//inputDesc.setAttribute("id",inputDescName);
//inputDesc.setAttribute("name",inputDescName);
//inputDesc.setAttribute("cols",40);
//inputDesc.setAttribute("rows",4);

td7.appendChild(inputDesc);
tr6.appendChild(td7);

var tr7 = document.createElement("tr");
var td8 = document.createElement("<td height='10'>");
//td8.setAttribute("height",10);

tr7.appendChild(td8);

tbody2.appendChild(tr2);
tbody2.appendChild(tr3);
tbody2.appendChild(tr4);
tbody2.appendChild(tr5);
tbody2.appendChild(tr6);
tbody2.appendChild(tr7);

table2.appendChild(tbody2);

div4.appendChild(table2);

td2.appendChild(div2);
td2.appendChild(div3);
td2.appendChild(div4);

var td9 = document.createElement("<td width='21'>");
//td9.setAtrribute("width",21);

var txtempty = document.createTextNode(" ");

td9.appendChild(txtempty);

var td10 = document.createElement("<td width='189'>");
//td10.setAtrribute("width",189);

var imgphoto = document.createElement("<img src='pics/blank50x50.gif' id='photo"+num+"' name='photo"+num+"' width='50' height='50' class='upload_border'>");
//imgphoto.setAtrribute("name","photo"+num);
//imgphoto.setAtrribute("id","photo"+num);
//imgphoto.setAtrribute("src","pics/blank50x50.gif");
//imgphoto.setAtrribute("width",50);
//imgphoto.setAtrribute("height",50);
//imgphoto.setAtrribute("class","upload_border");
//imgphoto.setAtrribute("className","upload_border");

td10.appendChild(imgphoto);

tr1.appendChild(td1);
tr1.appendChild(td2);
tr1.appendChild(td10);

tbody1.appendChild(tr1);

table1.appendChild(tbody1);

div.appendChild(table1);

ni.appendChild(div);

}

function auto_add(last_field) {

if ((last_field+1) == contador_upload) {

add_div_field();

}


}

thank you all!

[ambisinistral]

Where does contador_upload ever get defined? I initialized it and changed your code as follows:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function add_div_field () {
var contador_upload=1;
var ni = document.getElementById('upload_div');
var num = contador_upload++;
var div = document.createElement("div");
var div_name = "filediv"+num;
div.setAttribute("id",div_name);

var table1 = document.createElement("table");
table1.style.width="100%";
table1.class="table0";
table1.name="Name";

var tbody1 = document.createElement("tbody");

var tr1 = document.createElement("tr");
tr1.style.width="100%";
tr1.id="upload_table"+num;

var td1 = document.createElement("td");
tr1.style.width="13";

var strong1 = document.createElement("strong");
var txtno = document.createTextNode(num+'.');

strong1.appendChild(txtno);

td1.appendChild(strong1);

var td2 = document.createElement("td");
td2.style.width="700";
td2.valign="middle";
td2.class="grey_small";
td2.name="grey_small";

var div2 = document.createElement("div");
div2.id="file"+num;
div2.class="showme";
div2.name="showme";

var iframe = document.createElement("iframe");
iframe.align="middle";
iframe.marginheight=0;
iframe.scrolling="no";
iframe.marginwidth=0;
iframe.frameborder=0;
iframe.width=300;
iframe.height=22;
iframe.src="upload2.php?upload_id="+num;

div2.appendChild(iframe);

var div3 = document.createElement("div");
div3.setAttribute("id","waiting"+num);
div3.setAttribute("class","hideme");
div3.setAttribute("className","hideme");

var txtwaiting = document.createTextNode(' Subiendo imagen, espera unos instantes...');
var br = document.createElement("br");

var imgwaiting = document.createElement("img");
imgwaiting.src = "pics/uploading.gif";
imgwaiting.width=220;
imgwaiting.height=19;
imgwaiting.align="middle";

div3.appendChild(txtwaiting);
div3.appendChild(br);
div3.appendChild(imgwaiting);

var div4 = document.createElement("div");
div4.setAttribute("id","end_upload"+num);
div4.setAttribute("class","hideme");
div4.setAttribute("className","hideme");

var table2 = document.createElement("table");
table2.width="100%";

var tbody2 = document.createElement("tbody");

var tr2 = document.createElement("tr");

var td3 = document.createElement("td");
td3.height=10;

tr2.appendChild(td3);

var tr3 = document.createElement("tr");
var td4 = document.createElement("td");
var txttitle = document.createTextNode("Título:");

td4.appendChild(txttitle);
tr3.appendChild(td4);

var tr4 = document.createElement("tr");
var td5 = document.createElement("td");

var inputTitle = document.createElement("input");
var inputTitleName = "title["+num+"]";
inputTitle.type = 'text';
inputTitle.setAttribute("id",inputTitleName);
inputTitle.setAttribute("name",inputTitleName);

td5.appendChild(inputTitle);
tr4.appendChild(td5);

var tr5 = document.createElement("tr");
var td6 = document.createElement("td");

var txtdesc = document.createTextNode("Descripción Opcional:");

td6.appendChild(txtdesc);
tr5.appendChild(td6);

var tr6 = document.createElement("tr");
var td7 = document.createElement("td");

var inputDesc = document.createElement("textarea");
var inputDescName = "desc["+num+"]";
inputDesc.setAttribute("id",inputDescName);
inputDesc.setAttribute("name",inputDescName);
inputDesc.setAttribute("cols",40);
inputDesc.setAttribute("rows",4);

td7.appendChild(inputDesc);
tr6.appendChild(td7);

var tr7 = document.createElement("tr");
var td8 = document.createElement("td");
td8.setAttribute("height",10);

tr7.appendChild(td8);

tbody2.appendChild(tr2);
tbody2.appendChild(tr3);
tbody2.appendChild(tr4);
tbody2.appendChild(tr5);
tbody2.appendChild(tr6);
tbody2.appendChild(tr7);

table2.appendChild(tbody2);

div4.appendChild(table2);

td2.appendChild(div2);
td2.appendChild(div3);
td2.appendChild(div4);

var td9 = document.createElement("td");
td9.width=21;

var txtempty = document.createTextNode(" ");

td9.appendChild(txtempty);

var td10 = document.createElement("td");
td10.width=189;

var imgphoto = document.createElement("img");
imgphoto.name="photo"+num;
imgphoto.id="photo"+num;
imgphoto.src="pics/blank50x50.gif";
imgphoto.width=50;
imgphoto.height=50;
imgphoto.class="upload_border";
imgphoto.name="upload_border";

td10.appendChild(imgphoto);

tr1.appendChild(td1);
tr1.appendChild(td2);
tr1.appendChild(td10);

tbody1.appendChild(tr1);

table1.appendChild(tbody1);

div.appendChild(table1);

ni.appendChild(div);

}

function auto_add(last_field) {

if ((last_field+1) == contador_upload) {

add_div_field();

}


}
</script>

</head>

<body>
<div id="upload_div"></div>

<script type="text/javascript">
add_div_field();
</script>


</body>
</html>


Course, it now works in firefox, but not IE. Still, if you narrow down the lines failing in IE you should be able to locate the error easy enough.

[glenngv]

div3.setAttribute("className","hideme");
should be:
div3.className = "hideme";