Question

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?

Answer 1

Check out my ugly but functional cheese. I wrote a function that works like getelementbyid, but you give it a start node instead of the document. Works like a charm. It may be inefficient but I have great faith in the microprocessors running today’s browsers’ javascript engines.

function getelement(node, findid) 
  {
    if (node)
      if (node.id)
        if (node.id == findid)
          return node;
    node = node.firstChild;
    while(node) 
      {
        var r = getelement(node, findid);
        if (r != null)
          return r;
        node = node.nextSibling;
      }
    return null;
  }