How do I access a particular division on a page that has the same identifier in two places?


This is the same question as this:

Referring to a div inside a div with the same ID as another inside another

except for one thing.

The reason there are two elements with the same ID is because I'm adding rows to a table, and I'm doing that by making a hidden div with the contents of the row as a template. I make a new div, copy the innerhtml of the template to my new div, and then I just want to edit bits of it, but all the bits have the same ID as the template.

I could dynamically create the row element by element but it's a VERY complex row, and there's only a few things that need to be changed, so it's a lot easier to just copy from a template and change the few things I need to.

So how do I refer to the elements in my copy, rather than the template? I don't want to mess up the template itself, or I'll never be able to get at the bits for a second use.

Or is there another simpler way to solve the problem?

It will probably just be easiest when manipulating the innerHtml to do a replace on the IDs for that row. Maybe something like...

var copiedRow = templateRow.innerHTML.replace(/id=/g,"$1copy")

This will make the copied divs be prefixed with "copy". You can develop this further for the case that you have multiple copies by keeping a counter and adding that count variable to the replace() call.