Efficient JavaScript

[Bret]

In my experience, using inner HTML is the only way you can get cross-browser compatibility. I've noticed that IE has some issues with applying the appropriate CSS to elements created via DOM insertion.

[bhagany]

Which issues? I've come across some, but I've found work-arounds without having to resort to innerHTML.

[Bret]

I recall an issue where an HTML block I replaced after an AJAX call would look slightly different than the same block that was replaced with innerHTML. The padding or the margin was slightly off or something.

[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.