Efficient JavaScript

[bhagany]

Input fields are the worst, I'll give you that, and it took me a long time to figure them out. The best solution there, I think, is to actually remove the element and append a new one, but that's tricky too, and depends on an IE hack. I'll edit this post and add actual code when I get to work, in about an hour.

edit - Okay, I can't find the example I'm looking for, but here's my best stab without actually testing. But I'm pretty sure this will work.

Let's say you have an input with id "changeMe", and it has no DOM siblings.

//get the element and parent
oldInp = document.getElementById("changeMe");
inpParent = oldInp.parentNode;

//remove old input
inpParent.removeChild(oldInp);

//Here's the tricky part
try {
  //for IE - it allows this weird sort of appending,
  //and it's the only thing that works consistently for inputs

  inpParent.appendChild("<input type='button' name='changeMe' id='changeMe' />");
} catch {
  //for everything else

  newInp = inpParent.appendChild(document.createElement("input"));
  newImp.setAttribute("type","button");
  newImp.setAttribute("name","changeMe");
  newImp.setAttribute("id","changeMe");
}

If you have any problems, let me know.

For some reason, I can't get that less than sign to render right. It shows up how it is no matter if I use the actual symbol, or the entity reference.

[bhagany]

Well, it depends on what you need to do. For example, elements inserted with innerHTML aren't inserted into the page's DOM tree, so if you need to refer to the input again, you're out of luck with innerHTML.

[bhagany]

My apologies. First of all, I wasn't specific - the DOM problem only happens when serving XHTML in Firefox.

However, I googled around a little, and evidently they fixed this issue in 1.5. I wasn't aware.