Change id of element in DOM, IE7...

[Stephen Durkin]

I have some javascript to rearrange a list of elements...

1) Each element (div) is initially given a unique id, the same id of
the database record the element represents.
2) User "moves" element from slot 3 to slot 6, for example (result: 3-

6, 6->5, 5->4, 4->3).

3) I copy the innerHTML of each div (3-6) into an array.
4) I set the innerHTML of each div (3-6) to now contain the
appropriate content from the array.
5) I update the id's of each div (3-6)...

Seems simple enough for me, and seems to work flawlessly in Firefox...

IE7, however, seems to forget the effects of step 5, so on the second
"move," step 4 puts the innerHTML's in the wrong slots...grrrrrr...any
ideas?

 

[Thomas 'PointedEars' Lahn]

I have some javascript to rearrange a list of elements...

1) Each element (div) is initially given a unique id, the same id of
the database record the element represents.
2) User "moves" element from slot 3 to slot 6, for example (result: 3-
3) I copy the innerHTML of each div (3-6) into an array.
4) I set the innerHTML of each div (3-6) to now contain the
appropriate content from the array.
5) I update the id's of each div (3-6)...

Seems simple enough for me, and seems to work flawlessly in Firefox...

IE7, however, seems to forget the effects of step 5, so on the second
"move," step 4 puts the innerHTML's in the wrong slots...grrrrrr...any
ideas?

You should move the elements, not their content.

slot[5].appendChild(slot[2].firstChild);

That is, provided that the `firstChild' property refers to the element
to be moved, and not to a whitespace text node. You may want to use
slot[2].getElementsByTagName("*")[0] or another reference instead.


PointedEars

 

[Stephen Durkin]

I have some javascript to rearrange a list of elements...

1) Each element (div) is initially given a unique id, the same id of
the database record the element represents.
2) User "moves" element from slot 3 to slot 6, for example (result: 3-
3) I copy the innerHTML of each div (3-6) into an array.
4) I set the innerHTML of each div (3-6) to now contain the
appropriate content from the array.
5) I update the id's of each div (3-6)...

Seems simple enough for me, and seems to work flawlessly in Firefox...

IE7, however, seems to forget the effects of step 5, so on the second
"move," step 4 puts the innerHTML's in the wrong slots...grrrrrr...any
ideas?

You should move the elements, not their content.

slot[5].appendChild(slot[2].firstChild);

That is, provided that the `firstChild' property refers to the element
to be moved, and not to a whitespace text node. You may want to use
slot[2].getElementsByTagName("*")[0] or another reference instead.

PointedEars

Thanks for the help. I implemented this approach, and guess what? It
seems flawless in Firefox but it's broken in IE7!! The failing
behavior is different now. I don't know why but I'll post more
details tomorrow. Anonymous should take down Microsoft after the CoS
dust settles.