DOM elements

[justsomeguy]

I've got an application where I'm building some elements in the DOM, in this example I'm adding a text box and a submit button to a td element:

save = ce("input");save.setAttribute("type", "submit");txt = ce("input");txt.setAttribute("type", "text");tr.childNodes[0].appendChild(txt);tr.childNodes[0].appendChild(save);txt.setAttribute("className", "standard_input");txt.setAttribute("class", "standard_input");txt.setAttribute("value", old_title);txt.setAttribute("size", 150);txt.setAttribute("maxlength", 255);txt.setAttribute("name", "cat_title");txt.setAttribute("id", "cat_title");txt.style.marginRight = "5px";save.setAttribute("className", "standard_button");save.setAttribute("class", "standard_button");save.setAttribute("value", "Save");save.onclick = update_cat;

That code works fine in IE and Opera. But when I reverse the order of assigning attributes and assign the button attributes first then the text box attributes, this code renders the submit button fine but the text box doesn't have any attributes applied to it. Does anyone know why?

save = ce("input");save.setAttribute("type", "submit");txt = ce("input");txt.setAttribute("type", "text");tr.childNodes[0].appendChild(txt);tr.childNodes[0].appendChild(save);save.setAttribute("className", "standard_button");save.setAttribute("class", "standard_button");save.setAttribute("value", "Save");save.onclick = update_cat;txt.setAttribute("className", "standard_input");txt.setAttribute("class", "standard_input");txt.setAttribute("value", old_title);txt.setAttribute("size", 150);txt.setAttribute("maxlength", 255);txt.setAttribute("name", "cat_title");txt.setAttribute("id", "cat_title");txt.style.marginRight = "5px";

[rnd me]

just a guess: save.onclick needs to be done using setAttribute.i know assigning events directly like that causes issues in firefox...

[boen_robot]

Why not append the childs at the end of the script, only once you have all of the attributes set? The order won't matter (though I'm not sure why this problem occurs on the first place) and as far as I have gathered, it would also increase performance a little, since you'll only have two redraws - one with each append, whereas now you have those two, plus all of the setAttributes() after the nodes have been appended.

[justsomeguy]

just a guess: save.onclick needs to be done using setAttribute.i know assigning events directly like that causes issues in firefox...

I've got a lot of code doing that, Firefox doesn't seem to have issues with it.

Why not append the childs at the end of the script, only once you have all of the attributes set?

When I was originally researching stuff like this I remember finding something that mentioned that IE has issues if you set attributes before you assign the node somewhere, I'm not sure if that's true or not though.

[boen_robot]

When I was originally researching stuff like this I remember finding something that mentioned that IE has issues if you set attributes before you assign the node somewhere, I'm not sure if that's true or not though.

Once upon a time, I was setting attributes like that and I had no problems with IE on that fashion, so I suggest you try to do just that.What I did had problems with though was setting event attributes with setAttribute(). IE doesn't respect the event itself. It does generate the attribute in the DOM tree, but just doesn't fire the event.

[justsomeguy]

That's been my experience, I haven't had a lot of luck using setAttribute to assign event handlers. There is an attachEventHandler method to do just that, but that's still a browser-specific thing at this point.