How do I get the most recently updated form item to “stick” in Firefox when I copy its container?

Question

I have a dl containing some input boxes that I "clone" with a bit of JavaScript like:

var newBox = document.createElement('dl'); 
var sourceBox = document.getElementById(oldkey); 
newBox.innerHTML = sourceBox.innerHTML; 
newBox.id = newkey;          
document.getElementById('boxes').appendChild(columnBox);   

In IE, the form in sourceBox is duplicated in newBox, complete with user-supplied values. In Firefox, last value entered in the orginal sourceBox is not present in newBox. How do I make this "stick?"

Answer 1

Firefox vs. IE: innerHTML handling ?

Answer 2

You could try the cloneNode method. It might do a better job of copying the contents. It should also be faster in most cases

var newBox;
var sourceBox = document.getElementById(oldkey);
if (sourceBox.cloneNode) 
    newBox = sourceBox.cloneNode(true);
else {
    newBox = document.createElement(sourceBox.tagName); 
    newBox.innerHTML = sourceBox.innerHTML; 
}
newBox.id = newkey;              
document.getElementById('boxes').appendChild(newBox);

Answer 3

Thanks folks.

I got things to work by using prototype and changing document.getElementById(oldkey) to $(oldkey)

<script src="j/prototype.js" type="text/javascript"></script>  

var newBox;  
var sourceBox = $(oldkey);  
if (sourceBox.cloneNode)  
     newBox = sourceBox.cloneNode(true);  
else {  
    newBox = document.createElement(sourceBox.tagName);  
    newBox.innerHTML = sourceBox.innerHTML;  
}  
newBox.id = newkey;  
document.getElementById('boxes').appendChild(newBox);