Problem with function insertBefore()

[Janis Papanagnou]

This is partly a repost that was maybe too buried to be seen. Sorry for
that. I thought it would be an easy to be answered question, but I may be
wrong...

I wanted to _insert_ cloned table row into the same table, and while using
appendChild() worked fine insertBefore() - which is what I actually need -
resulted in an error.

This code works...

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

But trying to insert it before active_row with this code failed[*]...

active_row = document.getElementById ("Active_Row")
cloned_row = active_row.cloneNode (true)
document.getElementById ("Table").insertBefore (cloned_row, active_row)

What's wrong with that code? Any insights greatly appreciated!

Janis
[*] The error messages in the Javascript console:

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

[RobG]

Janis Papanagnou wrote:

This is partly a repost that was maybe too buried to be seen. Sorry for
that. I thought it would be an easy to be answered question, but I may be
wrong...

I wanted to _insert_ cloned table row into the same table, and while using
appendChild() worked fine insertBefore() - which is what I actually need -
resulted in an error.

This code works...

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

That won't work in IE because it wants to append rows to a tbody, not a
table. Also, you need to change the id of the cloned row otherwise
you'll have duplicate IDs, which is invalid HTML.

var active_row = document.getElementById("Active_Row");
var cloned_row = active_row.cloneNode(true);
cloned_row.id = '';
active_row.parentNode.appendChild(cloned_row);

Opinions differ on the use of semi-colons to end statements, however I
think it's much better to always use them. It's also better to not put
a space between an identifier and an opening bracket '(', and always
use var to keep variables local unless you have a good reason not to
use it.

But trying to insert it before active_row with this code failed[*]...

active_row = document.getElementById ("Active_Row")
cloned_row = active_row.cloneNode (true)
document.getElementById ("Table").insertBefore (cloned_row, active_row)

What's wrong with that code? Any insights greatly appreciated!

Try:

var active_row = document.getElementById("Active_Row");
var cloned_row = active_row.cloneNode(true);
cloned_row.id = '';
active_row.parentNode.insertBefore(cloned_row, active_row);
--
Rob

[Janis Papanagnou]

RobG wrote:

Janis Papanagnou wrote:

> active_row = document.getElementById ("Active_Row")
cloned_row = active_row.cloneNode (true)
document.getElementById ("Table").appendChild (cloned_row)

That won't work in IE because it wants to append rows to a tbody,

I have to admit I don't understand why. But okay, I'll avoid that.

not a
table. Also, you need to change the id of the cloned row otherwise
you'll have duplicate IDs, which is invalid HTML.

Yes, that's what I feared. (I mentioned that in the other thread.)

var active_row = document.getElementById("Active_Row");
var cloned_row = active_row.cloneNode(true);
cloned_row.id = '';
active_row.parentNode.appendChild(cloned_row);

Opinions differ on the use of semi-colons to end statements, however I
think it's much better to always use them. It's also better to not put
a space between an identifier and an opening bracket '(', and always
use var to keep variables local unless you have a good reason not to
use it.

Thanks, I'll keep that in mind.

>>But trying to insert it before active_row with this code failed[*]...

active_row = document.getElementById ("Active_Row")
cloned_row = active_row.cloneNode (true)
document.getElementById ("Table").insertBefore (cloned_row, active_row)

What's wrong with that code? Any insights greatly appreciated!

Try:

var active_row = document.getElementById("Active_Row");
var cloned_row = active_row.cloneNode(true);
cloned_row.id = '';
active_row.parentNode.insertBefore(cloned_row, active_row);

Clearing 'id' and using 'parentNode' indeed fixed the problems I had.

That was very helpful advice; thanks a lot! :-)

Janis