How to handle element IDs (and names) when cloning nodes

[Janis Papanagnou]

I want to use the 'cloneNode(true)' method to duplicate table rows with
all its subnodes. Cloning the complete tree is very handy but I must be
cautious because of the unique IDs and names that I'll subsequently use
to address the original row elements.

Is there any sophisticated way to adjust all the element IDs and names
of the cloned rows so that there won't be any clashes if I subsequently
address them by ID? Or do I have to manually parse the subtree and change
the ID/name attributes of each node separately?

Thanks for any hints!

Janis

 

[Martin Honnen]

Is there any sophisticated way to adjust all the element IDs and names
of the cloned rows so that there won't be any clashes if I subsequently
address them by ID? Or do I have to manually parse the subtree and change
the ID/name attributes of each node separately?

If you do e.g.
var element = someElement.cloneNode(true);
then to look for all contained elements you can use e.g.
var elements = element.getElementsByTagName('*');
and then check element.id and loop through those elements to check for
ids you want/need to change. Note that IE/Win unfortunately only
supports the wild card '*' with IE 6 and later, for older versions you
could use
var elements = element.all;

 

[Janis Papanagnou]

If you do e.g.
var element = someElement.cloneNode(true);
then to look for all contained elements you can use e.g.
var elements = element.getElementsByTagName('*');

That's interesting; good to know that wildcards are possible.

and then check element.id and loop through those elements to check for
ids you want/need to change. Note that IE/Win unfortunately only
supports the wild card '*' with IE 6 and later, for older versions you
could use
var elements = element.all;

Okay, so I have to parse that manually, if I understand correct.
So what I've done now is to select all the elements by <input> tag.

active_row = document.getElementById ("Active_Row")
cloned_row = active_row.cloneNode (true);

for (i=0; i<N; i++)
{
element_i = cloned_row.getElementsByTagName ('input')
attr_disabled = document.createAttribute ("disabled")
attr_disabled.nodeValue = "disabled" /* [1] */
element_i.setAttributeNode (attr_disabled)
element_i.removeAttribute ("name") /* [2] */
}

Some questions came up with that code where I am feeling uncertain...

In HTML I've heard it be good style to define an attribute 'disabled' as
<... disabled="disabled" ...>
and I've done the same above in [1]; but is that line also necessary in
Javascript?

To disable the selection by name I just removed the name attribute in [2];
I suppose it is okay to do it that way?

The third question is the most puzzling for me; following the above code
I wanted to insert cloned_row into the table, and while appending worked
fine...

document.getElementById ("Table").appendChild (cloned_row)

trying to _insert_ it before active_row with this code...

document.getElementById ("Table").insertBefore (cloned_row, active_row)

*failed* with an error message in the console:

Error: uncaught exception: [Exception... "Node was not found"
code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)"
location: "file:... Line: 390"]

But according to some documentation I have that should work. What have I
done wrong?

Thanks for any insights!

Janis